el-form 的具体使用

在 Vu2 工程化开发时，使用 element-ui 组件会大大提高开发效率

其中 el-form 使用的比较频繁，<el-form> 是 Element UI 组件库中的一个表单组件，用于快速构建表单界面。当我们需要构建一个包含多个输入框、下拉框等控件的表单时，可以使用 <el-form> 来实现。

以下是一些使用 <el-form> 的常见场景：

1. 当需要收集用户输入信息时，例如注册表单、登录表单等。
2. 当需要进行数据的添加、修改或删除操作时，例如管理后台中的数据管理模块。
3. 当需要对提交的表单数据进行校验时，可以使用 <el-form> 提供的校验功能。
4. 当需要将表单数据与后端进行交互时，可以使用 <el-form> 内置的提交功能，并通过 submit 事件处理表单提交的逻辑。

需要注意的是，在使用 <el-form> 时，需要为每个表单控件设置一个唯一的 prop 属性值，以便在验证表单数据、提交表单数据等操作时能够正确地获取表单数据。同时，也需要注意控件的布局方式，如何设置 label 的位置、控件的宽度等，以达到良好的用户体验效果。

以下是在开发时的实际应用场景，当你需要一个弹出框，弹出框内有表单+input ,且表单要同时使用添加和编辑两个功能要如何去做，要如何去使用？

<template>
  <div>

    <el-dialog
      :title="modifyTitle ? '添加' : '编辑'"
      :visible="dialogVisible"
      width="30%"
      @close="shutDown"
    >
      <!-- <span>这是一段信息</span> -->
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item prop="name" label="权限名称">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item prop="code" label="权限标识">
          <el-input v-model="form.code" />
        </el-form-item>

        <el-form-item prop="description" label="权限描述">
          <el-input v-model="form.description" />
        </el-form-item>

        <el-form-item label="开启添加">
          <el-switch
            v-model="form.enVisible"
            active-color="#13ce66"
            inactive-color="#ff4949"

            active-value="1"

            inactive-value="0"
          />
        </el-form-item>

        <el-form-item>
          <el-button @click="shutDown">取 消</el-button>
          <el-button type="primary" @click="cli">确 定</el-button>

          <!-- {{ modifyTitle }} -->
        </el-form-item>

      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import { addAuthority, getRole, modifyAuthority } from '@/api/tree'
export default {
  props: {
    // 弹出框
    dialogVisible: {
      type: Boolean,
      required: true
    },
    // 当前 id
    addIowAutId: {
      type: Number,
      required: true
    },
    // 修改标题
    modifyTitle: {
      type: Boolean,
      require: true
    }
  },
  data() {
    return {
      value: '',
      form: {
        id: '',
        name: '',
        code: '',
        description: '',
        type: 1,
        pid: 0,
        enVisible: ''
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 确定
    cli() {
      // 表单兜底校验
      this.$refs.form.validate((val) => {
        if (val) {
          if (this.modifyTitle) {
            if (this.addIowAutId === 0) {
              this.requestData()
            } else {
            // console.log('二级权限添加')
            // 父级 id
              this.form.id = this.addIowAutId

              this.requestData()
            }
          } else {
            // 记录id
            this.form.id = this.addIowAutId
            // 编辑权限
            this.editAuthority()
          }
        }
      })
    },
    // 获取编辑的信息，回显
    async  acquireData() {
      // 获取角色详情 .toString()

      const res = await getRole(this.addIowAutId)

      console.log('获取角色详情', res)
      console.log('获取角色详情id-', this.addIowAutId)

      // 数据回显
      this.form = res.data.data
      // console.log('要回显的', this.popForm)
    },
    // 编辑权限
    async editAuthority() {
      // 发请求修改
      const res = await modifyAuthority(this.form)

      console.log('确定修改', res)

      // 提示
      this.$message.success('修改成功')

      // 关闭弹窗
      this.shutDown()

      // 刷新
      this.$emit('acqAuthority')
    },
    // 发请求添加
    async requestData() {
      // 发请求添加
      const res = await addAuthority(this.form)

      console.log('添加权限', res)

      // 提示
      this.$message.success('添加权限成功')

      // 关闭弹出
      this.shutDown()

      // 刷新
      this.$emit('acqAuthority')

      // 清空表单
      this.form = {}
    },
    // 取消
    shutDown() {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style>

</style>

删除

 <!-- 气泡确认框 -->
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="删除后将无法在恢复，您确定删除吗？"
            @onConfirm="delData(row)"
          >

            <el-button
              slot="reference"
              class="but"
              size="mini"
              type="primary"
              plain
            >删除</el-button>
          </el-popconfirm>
          
=======================================================

  // 删除
    async delData(row) {
      // console.log('确定删除')
      await delAuthority(row.id)

      // 提示用户
      this.$message.warning('已删除')
      // 刷新
      this.acqAuthority()
    }