Element-UI 实现增加表单项和删除表单项

项目需求：

最近在实际项目中碰到了一个需求，用户可以修改列表项的返回值，由于考虑到列表项比较多的情况，为了更好的用户体验，本次方案采用了弹出对话框，对话框内增加要修改的列表项，也可以删除掉 误增加的表单项，实现过程如下：

1、打开Element-UI界面，将Dialog 对话框的基本代码拷贝至项目

2、在对话框的内容部分将表单组件中的动态增减表单项的代码拷贝进来

3、修改表单字段名，修改按钮样式，增加接口调用

详细代码如下：

<template>
  <div>
    <el-dialog
      title="修改xpassData"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="dynamicValidateForm" :inline="true" :model="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        <!-- <el-button type="success" icon="el-icon-plus" size="small">新增域名</el-button> -->
        <div v-for="(domain, index) in dynamicValidateForm.domains" :key="index" class="inlineForm">
          <el-form-item
            :key="'columnName' + domain.key"
            :label="'字段名'"
            :prop="'domains.' + index + '.columnName'"
            :rules="{
              required: true, message: '域名不能为空', trigger: 'blur'
            }"
          >
            <el-select v-model="domain.columnName" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- <el-input v-model="domain.columnName" /> -->
          </el-form-item>
          <el-form-item>
            <!-- <el-input v-model="domain.type" /> -->
            <span>（旧值： {{ detail.name }}）</span>
          </el-form-item>

          <el-form-item
            :key="'newValue' + domain.key"
            :label="'新值'"
            :prop="'domains.' + index + '.newValue'"
          >
            <el-input v-model="domain.newValue" />
          </el-form-item>
          <el-form-item>
            <el-button v-if="dynamicValidateForm.domains.length > 1" type="danger" icon="el-icon-delete" circle @click.prevent="removeDomain(domain)" />
            <el-button type="success" icon="el-icon-plus" circle @click="addDomain" />
          </el-form-item>
        </div>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dynamicValidateForm: {
        domains: [{
          newValue: '',
          columnName: '',
          key: Date.now()
        }]
      },
      detail: {

      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }]
    }
  },
  methods: {
    open(row) {
      this.dialogVisible = true
      console.log(row)
      this.detail = row
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitForm(formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('此操作将提交, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log(that.dynamicValidateForm)
            // that.dialogVisible = false
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        newValue: '',
        columnName: '',
        key: Date.now()
      })
    }
  }
}
</script>
<style>
.inlineForm{
  display: flex;
 align-items: center;
}
</style>

实现效果图：

今日感悟：不要畏惧困难的工作，因为当你克服了困难的任务，回头去看曾经觉得很难的功能，你会发现这功能原来还挺简单的。