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'}]"