实现表单子项的新增与删除
一:实现思路:通过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 {
...//验证失败后执行操作
}
})