[JavaScript知识库]element-form动态增减表单项

在这里总结一下element-form动态增减表单相关的探索

Element-ui表单中介绍了基础的动态新增和删除表单，源码如下：

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>

好多、好长啊。。。。我精简一下，去掉花里胡哨的校验功能等，提炼核心：

<el-form-item
    v-for="(domain, index) in domains"
    :label="'域名' + index"
    :key="domain.key"
  >
    <el-input v-model="domain.value" /><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button @click="addDomain">新增域名</el-button>
  </el-form-item>
  <script>
  export default {
    data() {
      return {
          domains: [{
            value: ''
          }],
      };
    },
    methods: {
      // 删除表单项
      removeDomain(item) {
        var index = this.domains.indexOf(item)
        if (index !== -1) {
          this.domains.splice(index, 1)
        }
      },
      // 新增表单项
      addDomain() {
        this.domains.push({
          value: '',
          key: Date.now()// 获取当前时间作为key，以确保表单的唯一key值
        });
      }
    }
  }
</script>

效果：

但是，这就一个input框，也太少了，需求里要动态增加人员信息，一个input框咋顶得住！！！

所以就琢磨了一下原理：v-for是核心，通过动态向domains数组里增加和删除数据项，来实现表单的增减

掌握了核心原理实现就简单了，先上实现效果：

这里贴一下相关代码：

<el-form-item
        v-for="(distributionLists, index) in distributionLists"
        :label="'收益分配方案' + (index + 1)"
        :key="distributionLists.key"
        style="margin-top: 20px"
      >
        <el-input
          v-model="distributionLists.recipientName"
          style="width: 20%"
          placeholder="姓名"
        ></el-input>
        <el-input
          v-model="distributionLists.recipientGh"
          style="width: 20%; margin-left: 10px"
          placeholder="工号"
        ></el-input>
        <el-input
          v-model="distributionLists.recipientDepartment"
          style="width: 20%; margin-left: 10px"
          placeholder="单位"
        ></el-input>
        <el-input
          v-model="distributionLists.amount"
          style="width: 20%; margin-left: 10px"
          type="number"
          placeholder="金额（单位：万元）"
        ></el-input>
        <el-button
          @click.prevent="removeDistributionList(distributionLists)"
          type="danger"
          style="margin-left: 10px"
          >删除</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          @click="addDistributionList"
          type="primary"
          style="margin-top: 10px"
          >新增收益分配方案</el-button
        >
      </el-form-item>

// js部分
<script>
  export default {
    data() {
      return {
      	distributionLists: [
        {
          recipientName: "",
          recipientGh: "",
          recipientDepartment: "",
          amount: "",
        },
      ],
      };
    },
    methods: {
      	// 删除表单
    	removeDistributionList(item) {
      		var index = this.distributionLists.indexOf(item);
      		if (index !== -1) {
        		this.distributionLists.splice(index, 1);
      		}
    	},
    	// 新增表单
    	addDistributionList() {
      		this.distributionLists.push({
        		amount: "",
        		recipientDepartment: "",
        		recipientGh: "",
        		recipientName: "",
      		});
    	},
    }
  }
</script>