需求场景:需要校验表单中循环的数组中每组数据的min和max值,根据此例方法给校验传参index,可以精准校验,避免循环校验,还可以传其它自定义参数,支持多参同传。 form-item循环部分代码:
<el-form :model="formDataObj" :rules="rules" ref="form" >
<div v-for="(item, index) in formDataObj.testList" :key="index">
<el-form-item label="min" :prop="`testList[${index}].min`" :rules="{ required: true, validator:minValidator, index:index, trigger: 'blur' }">
<el-input v-model="item.min"></el-input>
</el-form-item>
<el-form-item label="max" :prop="`test[${index}].max`" :rules="{ required: true, validator:maxValidator, index:index, trigger: 'blur' }">
<el-input v-model="item.max"></el-input>
</el-form-item>
</div>
</el-form>
js部分代码:
data(){
const minValidator = (rule,value,callback) => {
if(!value) callback(new Error('请输入min'));
console.log('rule=>',rule);
console.log('index=>',rule.index);
callback();
};
const maxValidator = (rule,value,callback) => {
if(!value) callback(new Error('请输入max'));
console.log('rule=>',rule);
console.log('index=>',rule.index);
callback();
};
return {
minValidator:minValidator,
maxValidator:maxValidator,
formDataObj:{
testList:[{min:1,max:2},{min:3,max:6}]
}
}
}
根据此例方法给校验传参index,还可以传其它自定义参数,支持多参同传。