form表单中其中一条数据有多个子数据，点击新增按钮实现新增，点击删除按钮删除

实现表单子项的新增与删除

一：实现思路：通过v-for循环创建，点击新增则数组增加一条数据，点击删除则数据删除一条数据

1.页面代码

<el-form ref="form" :model="form" :rules="rules">
	<el-form-item label="数据1" prop="data1">
	    <el-input v-model="form.item1"></el-input>
	</el-form-item>
	<el-form-item label="数据2" prop="data2">
	    <el-input v-model="form.item2"></el-input>
	</el-form-item>
	<el-form-item label="item3" prop="item3">
		<div v-for="(item, index) in form.data3" :key="index">
			<div class="itemBox">
				<el-form-item :prop="`data3.${index}.item1`" :rules="rules.item1">
					<el-input v-model="item.item1"/>
				</el-form-item>
				<el-form-item :prop="`data3.${index}.item2`" :rules="rules.item2">
					<el-input v-model="item.item2"/>
				</el-form-item>
				<el-form-item :prop="`data3.${index}.item3`" :rules="rules.item3">
					<el-input v-model="item.item3"/>
				</el-form-item>
			</div>
			<div class="btnBox">
				<span class="el-icon-circle-plus-outline class-aaaa" @click="addSub()" v-if="index+1 == form.item3.length"></span>
				<span class="el-icon-remove-outline class-aaaa" @click="deleteSub(index)" v-if="index > 0 || forms.item3.length > 1"></span>
			</div>
		</div>
	</el-form-item>
</el-form>

2. 数据

form: {
   	 data1: '',
     data1: '',
     // 子项数据
     data3: [
         {
             item1:"",
             item2:"",
             item3:""
         },
     ],
 },

3.数组数据的增加与删除

addThreshold() {
	this.addDictForm.children.push({
	  item1:"",
	  item2:"",
	  item3:""
	});
},
 // 删除子项
  deleteThreshold(i) {
      if (this.form.item3.length > 1) {
          this.form.item3.splice(i, 1);  
      }
  },

二：data3是个数组，校验就不能像基础数据一样由el-form绑定rule，在需要校验的字段上添加prop即可

方式一：数组的嵌套校验绑定，动态绑定prop和rule，rule的规则校验字段名正常写

<el-form-item :prop="`data3.${index}.item1`" :rules="rules.item1">
	<el-input v-model="item.item1"/>
</el-form-item>

方式二：通过validateField方法校验表单的某个字段。（没有试过，仅提供思路）
参考文档：elementUI rule详解

this.$refs.info.validateField('name', error => {
  if(!error){
    ...//验证通过后执行操作
  } else {
    ...//验证失败后执行操作
  }
})