新增行数据校验

废话不多说,上代码

   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数组中的对象为一行数据,随之增加

实现的效果呢,这里由于牵扯业务机密问题,不予演示,在这里简单描述一下,如果有需要直接联系本人,

业务场景为点击行增加时新增的下拉框数据(或输入框),不能和上面的重复,并且如果重复,校验的提示只能在本行显示与前面的重复!!!!

在这里可能有人会说这不就是普通的校验,我在开始校验的时候也是和大家一样,按照正常的方式进行校验,但现实却是让狠狠地打了一巴掌,让我知道了社会的残酷,当出现重复的时候会在这个对象相同的所有框提示为重复,根本无法判断问题出现在哪里?

所以最后在查阅文档和请教大佬或才得出的这样的处理方式

通过拿到历史的数据进行存储,然后将现在输的数据进行对比,最重点的是得出当前的输入的数据是第几个,然后再显示!!!

posted @ 2021-07-30 10:08  红尘卟卟  阅读(77)  评论(0编辑  收藏  举报