需求是: 在table里面编辑input, 多个input的值限制为数字,校验多个input框里的value不能相同
实现效果为下图 ↓
在做这个功能的时候,用户有可能自己操作增加数据的当前行,填写完一行,增加一行, 也有可能批量导入上百上千条数据, 做货物编号input的校验, 鼠标blur时多个input校验
标签写法为
<el-table-column prop="goodsNum" label="货物编号" align="center">
<template slot-scope="scope">
<el-form-item :prop="'outOrderGoodsUpdateDtoList.' + scope.$index + '.goodsNum'" :rules="rules.goodsNum">
<el-input v-model="scope.row.goodsNum" @blur="getGoodsData(scope.$index)">
</el-input>
</el-form-item>
</template>
</el-table-column>
data里定义
data() {
// 货物编号多个验证规则 ( 重 点 )
var validateGoodsNum=(rule, value, callback) =>{
var row_index = rule.field.replace(/[^0-9]/ig,"");
if (this.ruleForm.outOrderGoodsUpdateDtoList.length > 1) {
for(var index in this.ruleForm.outOrderGoodsUpdateDtoList){
var item = this.ruleForm.outOrderGoodsUpdateDtoList[index];
if(item.goodsNum == value && index != row_index){
callback(new Error('货物编号唯一性,不能重复'));
return;
}
}
callback();
}else{
callback();
}
}
return {
},
}
rules校验写法为
//验证规则
rules: {
// 货物编号
goodsNum: [
{
required: true, message: "货物编号不能为空", trigger: "blur" },
{
max: 50, message: "请控制长度在50个字符之内", trigger: "blur" },
{
required: true,
validator: validateGoodsNum,//在data里定义 ( 重 点 )
trigger: "blur",
message: "货物编号唯一性,不能重复",
},
],
},