废话不多说,上代码
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数组中的对象为一行数据,随之增加
实现的效果呢,这里由于牵扯业务机密问题,不予演示,在这里简单描述一下,如果有需要直接联系本人,
业务场景为点击行增加时新增的下拉框数据(或输入框),不能和上面的重复,并且如果重复,校验的提示只能在本行显示与前面的重复!!!!
在这里可能有人会说这不就是普通的校验,我在开始校验的时候也是和大家一样,按照正常的方式进行校验,但现实却是让狠狠地打了一巴掌,让我知道了社会的残酷,当出现重复的时候会在这个对象相同的所有框提示为重复,根本无法判断问题出现在哪里?
所以最后在查阅文档和请教大佬或才得出的这样的处理方式
通过拿到历史的数据进行存储,然后将现在输的数据进行对比,最重点的是得出当前的输入的数据是第几个,然后再显示!!!