动态增减表单，如何禁止时间选择重复的方法

前段时间做了一个需求，对一个循环生成的form表单，里面的时间做选择时，要求时间选择区间禁止重复，前面的文章中我有分享过这一篇，但是测试给我提了一个bug。针对于循环生成的问题。时间只是禁止不会跟当前操作的form表单重复，不会跟其他form表单校验。话不多说直接上图：

分析问题原因

// 选择时间校验
    const validateTime = (rule, value, callback) => {
      const val = value ? value.every((item) => item) : false;
      if (val) {
        const list = this.list.map((item) => {
          const list = [];
          item.batchInfoList.map((item) => {
            if (
              dayjs(value[0]).isSameOrBefore(item.timer[1]) &&  //  这里选择时间区间不能重复，可以看下我前面有篇文章介绍过//
              dayjs(value[1]).isSameOrAfter(item.timer[0])
            ) {
              list.push(true);
            }
          });
          return list;
        });
        list.some((item) => item.length > 1)
          ? callback(new Error("维护时间不可重复"))
          : callback();
      } else {
        callback(new Error("维护时间不能为空"));
      }
    };

1.由于时间选择时基于element库提供的时间选择工具。所以用了对应的form表单校验时间选择器的方法。
问题出现原因：由于每次点击新增后，会往循环的list数组新增一条数据，然而选择时间后，这里的校验是用了全部的数组进行校验，所以会出现上述问题

思路分析：
首先我要知道我操作的是哪个form表单，这个比较简单，给form表单的最外层添加一个点击事件后，取得对应的index，存起来，这样就可以知道是操作的哪个form表单。单独对其进行校验
上一个问题解决后，那么接下来如果点击保存提交，是需要对全部的form表单进行校验，最开始被这个交互逻辑绕的有点晕，后来发现，我操作提交保存时，会遍历整个list数组，对每一个form表单进行校验，这个没有问题。问题就在于它只是需要对自己的form表单进行校验。所以关键在于点击提交校验全部时，需要用一个变量将遍历的list数组下标存起来，然后每次校验时就对应校验匹配的from表单
完善后的代码如下

const validateTime = (rule, value, callback) => {
      const val = value ? value.every((item) => item) : false;
      if (val) {
        let newList;  // 关键在于这里。这里的newList 数组时我用来将每个form表单拿出来单独校验
        if (this.currValidateIndex === null) { // 如果是操作单独的form
          newList = [this.list[this.editIndex]];
        } else {// 如果是操作提交全部
          newList = [this.list[this.currValidateIndex]];
        }
        const list = newList.map((item) => {
          const list = [];
          item.batchInfoList.map((item) => {
            if (
              dayjs(value[0]).isSameOrBefore(item.timer[1]) &&
              dayjs(value[1]).isSameOrAfter(item.timer[0])
            ) {
              list.push(true);
            }
          });
          return list;
        });
        list.some((item) => item.length > 1)
          ? callback(new Error("维护时间不可重复"))
          : callback();
      } else {
        callback(new Error("维护时间不能为空"));
      }
    };

data中定义两个变量

editIndex: null,
currValidateIndex: null,


方法中操作：
// 点击对应的form表单校验时拿到对应的index
getIndex(index) {
      this.editIndex = index;
    },
// 提交全部校验
saveFn() {
      const validateList = [];
      this.editIndex = null;
      for (let i = 0; i < this.list.length; i++) {
        this.currValidateIndex = i;
        this.$refs["formData"][i].validate((valid) => {
          if (valid) {
            validateList.push(i);
          }
        });
      }
      if (validateList.length === this.list.length) {
        this.currValidateIndex = null;
        alert('提交成功')
      } else {
        this.currValidateIndex = null;
        alert("校验未通过")
      }
    },

页面.vue部分。就是给form表单外层的div加一个点击事件即可： @click.stop=“getIndex(index)”

上线前测出这个问题，困扰了好久没解决，最后还是在别人帮助下完成的，还是对element校验规则不太熟悉，得继续努！！！