在上一篇文章中，通过校验规则写成内联循环去校验from表单项，在之前的代码基础上，进行校验规则的二次封装，使代码更加简洁，灵活高效、
参考上一篇：Vue el-from的el-form-item v-for循环表单如何校验rules（一）-CSDN博客
1、需求效果
2、完整代码
<template>
<ul class="violation-content">
<li v-for="(item,index) in formData.tableData" :key="item.key">
<div class="content-item">
<el-form-item :prop="`tableData[${index}].name`" label-width="1" style="margin-bottom: 0;">
<el-input type="text" clearable placeholder="请输入" v-model.trim="item.name"></el-input>
</el-form-item>
</div>
<div class="content-item">
<span @click="delete(index)">删除</span>
<el-button type="primary" v-if="index === (formData.tableData.length-1)" @click="add">添加</el-button>
</div>
</li>
</ul>
</template>
export default {
data() {
return {
rules: {
},
formData:{
tableData: [],
}
};
},
created() {
this.$set(this.formData, 'tableData', [{name: '', key: Date.now()}])
this.addRules()
},
methods: {
add() {
this.formData.tableData.push({
name: '',
key: Date.now()
})
this.addRules()
},
delete(index) {
this.formData.tableData.splice(index, 1)
},
addRules() {
let leng = this.formData.tableData.length
for(let i = 0; i < leng; i++) {
this.rules[`tableData[${i}].name`] = [
{ required: true, message: '请输入', trigger: 'blur'}
]
}
},
},
};
</script>写在最后！！！
v-for循环对象的时候，是可以获得三个参数的，其中第一个参数是对象每一项的value值，第二个参数是每一项的key值，第三个参数是索引值，这里使用:prop="key+'.对应的key'"即可（不要漏了单引号里面的点）。循环对象的话是可以获得两个参数，其中第一个是数组的每一项，第二个参数是数组的下标，其实和对象是差不多的，v-for="(item,index) in array" , :prop="`array${index}.name`"