element表单数组循环校验,并传递参数,多参数

305 阅读1分钟

需求场景:需要校验表单中循环的数组中每组数据的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,还可以传其它自定义参数,支持多参同传。