Vue Element Form组件v-for循环里的表单验证

业务需求：在form表单中对el-form-item进行for循环校验。
1、页面代码

<el-form-itemv-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: [],},],}