el-time-picker的踩坑和如何判断无序时间段集合是否重叠

【一】el-time-picker的picker-options时间选择器的正确使用方法

<el-time-picker :disabled="scope.row.isDisabled" placeholder="选择" :picker-options="{selectableRange: `${classData[scope.$index-1]&&classData[scope.$index-1].endTime ? classData[scope.$index-1]&&classData[scope.$index-1].endTime+':00' : '00:00:00'} - ${classData[scope.$index-1]&&classData[scope.$index-1].endTime ? classData[scope.$index-1]&&classData[scope.$index-1].endTime+':00' : '23:59:59'} `}" v-model="scope.row.startTime" value-format="HH:mm" format="HH:mm" style="width: 388px" @change="selectStart(scope.$index,scope.row)"></el-time-picker> 

因为我项目这里时间格式只需要hh:mm,不需要秒，所以设置 value-format="HH:mm" format="HH:mm" ，第一个是日期格式，第二个是显示格式，但是picker-options开始设置怎么都不生效。解决办法只需要加上‘00’

【二】js判断无序时间段集合是否重叠算法

 上面图片是需求的样式，先说下，这个表格的行数是动态生成的，根据前面有一个下拉框的选择个数来生成表格的行，所以在前面绑定change事件的时候，循环选择的个数，再把表格的属性都push进data，所以最开始控制这个时间重叠的时候，想的是用picker-options时间选择器，但这样的话也只能控制当前行时间重叠的问题，且如果存在跨天也不适用，所以这个方法不适用。

其实最开始产品和我说的需求一直是每一行的下班时间在上班时间之后，并且每行的上班时间必须在前一行下班时间之后，我的思路就也一直局限在控制时间选择上，后来起来走走喝喝水，上上洗手间，换个思路想：产品的需求实际上不就是所有行的时间不能重叠嘛，那我就再点击确定的生成排班表的时候做校验，

那么这里涉及到两个问题：1、相邻时间的重叠判断（包含跨天）2、所有行的班次时间都要互相比较，所以就有点类似js冒泡比较大小的思想

代码解决问题1：相邻时间的重叠判断（包含跨天）

data里面需要定义一个repeatFlag:false（因为相邻时间判断的方法需要用在循环里，规定一个变量用来记录，方便只要遇到时间重叠的就要跳出循环，不然时间如果遇到正确的又得执行一遍）

checkTime(a, b, x, y) {
      var times1 = [],
        times2 = [];
      if (a < b) {
        //未跨天
        times1.push([a, b]);
      } else {
        //跨天
        times1.push([a, "24:00"], ["00:00", b]);
      }
      if (x < y) {
        times2.push([x, y]);
      } else {
        times2.push([x, "24:00"], ["00:00", y]);
      }
      var flag = false;
      //循环比较时间段是否冲突
      for (var i = 0; i < times1.length; i++) {
        if (flag) break;
        for (var j = 0; j < times2.length; j++) {
          if (this.check(times1[i][0], times1[i][1], times2[j][0], times2[j][1])) {
            flag = true;
            break;
          }
        }
      }
      if (flag) {
        // alert('时间冲突')
        this.repeatFlag = true
      } else {
       // alert('时间不冲突')
        this.repeatFlag = false;

      }
    },
    check(a, b, x, y) {
      if (a >= y || x >= b) {
        return false;
      } else {
        return true;
      }
    },

代码解决问题2：js冒泡循环比较所有班次时间是否重叠

for (let i = 0; i < this.classData.length-1; i++) {
            for (let j = 1+i; j < this.classData.length; j++) {
                var a = this.classData[i].startTime;
                var b = this.classData[i].endTime;
                var x = this.classData[j].startTime;
                var y = this.classData[j].endTime;
                this.checkTime(a, b, x, y);
                if(this.repeatFlag){
                  break;
                }
            }
            if(this.repeatFlag){
              break;
            }
if(this.repeatFlag == false){
//跳转页面
}else{
this.$message.error('班次时间有重叠！')
}

最后分享下我自己画图理解冒泡思想（非常简陋）