业务需求:在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: [],},],}