elementui动态生成表单项，并添加动态校验

1.定义一个表单

dynamicValidateForm: {
					operatorid: "", 
					domains: [] //动态生成的表单项都放在表单中的这个数组里面
				},

点击事件，点击按钮生成表单项

//动态添加表单
addDomain(){
this.dynamicValidateForm.domains.push({
 graduateyear:'', //需要动态添加的表单项
 college:'' ,    //需要动态添加的表单项
 .........
})
}
//动态移除表单项
removeDomain(item){
var index=this.dynamicValidateForm.domains.indexOf(item);
if(index !== -1){
this.dynamicValidateForm.domains.splice(index,1);
}
}

html代码实现

<el-form-item v-for="(item, index) in dynamicValidateForm.domains" :key="index" class="formContent">
  <div style="display:flex;">
		<div class="item">
			<el-form-item label="选择专业:" :prop="'domains.' + index +'.major'"  :rules="[{required: true, message: '请选择专业名称', trigger: 'blur'}]">
				<el-select v-model="item.major" placeholder="请选择专业">
					<el-option v-for="(option,index) in educationList" :key="option.index" :label="option.fname" :value="option.fcode">
					</el-option>
				</el-select>
			</el-form-item>
		</div>
		<div class="item">
			<el-form-item label="人数:"  :prop="'domains.' + index +'.number'"  :rules="[{required: true, message: '请输入人数', trigger: 'blur'}]">
				<el-input v-model="item.number" type="number"></el-input>
			</el-form-item>
		</div>
	    <div>
	      <img src="../../../assets/shanchu@2x.png" class="imgBtn" @click="removeDomain(item)">
		</div>
  </div>
</el-form-item>

动态校验主要的关键是绑定的prop属性,

//domians是表单项动态添加的数组，index是下标，number是属性名
:prop=" 'domains.' + index+ '.number' "
//绑定的验证
:rules="[{required: true, message: '请输入人数', trigger: 'blur'}]"