废话不多说,上代码
rules: {
fixedLineIdList: [
{
required: true,
validator: lineVerify,
trigger: "change"
}
]
}
},
// 线路重复校验
let lineVerify = (rule, value, callback) => {
console.log(value);
console.log(rule.field.match(/timeSlicing.(d+).fixedLineIdList/));
if (value.length) {
const index = rule.field.match(
/timeSlicing.(d+).fixedLineIdList/
)[1];
let arr = [];
this.searchForm.timeSlicing.forEach((v, idx) => {
if (idx != index) {
arr.push(...v.fixedLineIdList);
}
});
let flag = value.some(v => arr.includes(v));
if (flag) {
callback("线路不能重复选择");
} else {
callback();
}
} else {
callback();
}
};
这个是校验的规则
searchForm: {
deptId: "",
timeSlicing: [
{
fixedLineIdList: [], //需要校验的数字
frequency: ""
}
]
},
上面为数据的格式,点点击按钮的时候,searchForm对象中timeSlicing数组中的对象为一行数据,随之增加
实现的效果呢,这里由于牵扯业务机密问题,不予演示,在这里简单描述一下,如果有需要直接联系本人,
业务场景为点击行增加时新增的下拉框数据(或输入框),不能和上面的重复,并且如果重复,校验的提示只能在本行显示与前面的重复!!!!
在这里可能有人会说这不就是普通的校验,我在开始校验的时候也是和大家一样,按照正常的方式进行校验,但现实却是让狠狠地打了一巴掌,让我知道了社会的残酷,当出现重复的时候会在这个对象相同的所有框提示为重复,根本无法判断问题出现在哪里?
所以最后在查阅文档和请教大佬或才得出的这样的处理方式
通过拿到历史的数据进行存储,然后将现在输的数据进行对比,最重点的是得出当前的输入的数据是第几个,然后再显示!!!