写后台管理系统的时候，经常会碰到需要动态增减表单项的问题。关于单个字段的动态增减，element官方文档中早有相关说明动态增减表单项，今天主要写一下关于动态增减多个表单项。
动态增减多个表单项在本篇文章中指多个表单项互相之间有关联，如果增减的表单项之间没有关联关系，那么按照官方文档实现就可以。

实现效果

用户在填写个人学历信息的时候，需要填写学历，毕业学校，毕业时间，那么这三个字段之间就是互相关联的，所以用户新增学历信息的时候点击新增同时新增这三个字段，点击删除同时删除这三个字段。

页面展示.png

代码实现

• html部分
  默认只有一组信息时不展示删除按钮，超过一组才展示。
  学历信息的检验规则rules填加到具体的form-item上，其中注意prop和值的对应，data中的rules只用填加其他单个字段的对应校验即可。不需要校验则不用填加rules，也不用写prop。

<el-row v-for="(item, index) in form.list" :key="index">
    <el-col :span="24" style="display: flex; flex-direction: row;">
        <el-form-item 
          :prop="'list.' + index + '.education'" 
          label="学历"  :rules="{
          required: true, message: '请输入学历', trigger: 'blur'}">
          <el-input v-model="item.education" placeholder="请输入学历" />
        </el-form-item>
        <el-form-item style="margin-left: -120px;">
          <el-button v-if="form.list.length > 1" @click="removeItem(index)">
            删除
          </el-button>
        </el-form-item>
    </el-col>
    <el-col :span="24">
        <el-form-item 
          :prop="'list.' + index + '.school'" 
          label="毕业学校"  :rules="{
          required: true, message: '请输入毕业学校', trigger: 'blur'}">
          <el-input v-model="item.school" placeholder="请输入毕业学校" />
        </el-form-item>
    </el-col>
    <el-col :span="24">
        <el-form-item 
          :prop="'list.' + index + '.time'" 
          label="毕业时间"  :rules="{
          required: true, message: '请选择毕业时间', trigger: 'change'}">
          <div class="block" style="display: inline-block; margin-right: 20px;">
            <el-date-picker
              value-format="yyyy-MM"
              v-model="item.time"
              type="month"
              placeholder="毕业时间">
            </el-date-picker>
          </div>
        </el-form-item>
    </el-col>
</el-row>
<el-form-item>
    <el-button @click="addItem">新增学历</el-button>
</el-form-item>

• js部分
  如果希望页面初始化的时候展示一组输入框，则需要在list中定义一个完整的对象，如果不展示，list定义为空数组[]就可以。
  push 向数组末尾填加元素。
  splice(index, num, add1,...addX) 向数组指定位置删除或者填加元素。
  index：数组开始操作元素位置下标，必填；num：删除元素个数，非必填，不填则默认删除从index位置开始到末尾的所有元素；add1...addX：填加到数组的元素，非必填。

// 定义表单参数
form: {
    name: "",
    list: [
        {
            education: "",
            school: "",
            time: ""
        }
    ]
},
// 新增学历
addItem() {
  this.form.list.push({
    education: "",
    school: "",
    time: ""
  })
},
// 删除学历
removeItem(index) {
    this.form.list.splice(index, 1)
},

提交表单的时候按照往常的写法就可以了。如果输入值不符合校验，页面中会展示相应的提示信息，符合校验提交，功能就顺利实现啦。