Vue Element Form组件v-for循环里的表单验证
业务需求：在form表单中对el-form-item进行for循环校验。
1、页面代码
<el-form-item
v-for="(item, index) in ruleForm.timeRange"
:key="index"
label="选择适飞时间段"
:prop="'timeRange.' + index + '.value'"
:rules="rules.value"
></el-form-item>
2、data数据
ruleForm: {
timeRange: [
{
value: [],
},
],
}
rules: {
value: { required: true, message: '时间段不能为空', trigger: 'change' },
}
总结：
1、:rules
原来的写法是直接在外层 标签上设置一个总的 :rules 就可以了 ，现在是不仅需要设置总的 :rules ，还需要给 v-for 循环里的标签单独设置 :rules ，。注意要用 rules.value。
2、:prop
另外主要就是 :prop 了，注意正常验证表单项是 prop，而这里是 :prop。
:prop=“‘timeRange.’+index+‘.value’” 是拼接的形式，前面是 v-for 绑定的数组，中间是数组索引 index，最后是表单项绑定的 v-model 的名称，然后用点 . 把它们连接起来。这三项都必须保证正确，错一个都无法验证。
3、ruleForm
最后就是要注意，v-for 绑定的数组也必须绑定在 form 对象里，注意上面的 data 里：
ruleForm: {
timeRange: [
{
value: [],
},
],
}