vue2和vue3分别实现：多个时间选择框，设置后边的时间必须大于前面的

要实现以下效果：

1、动态渲染多个任务 每个任务选择时间

2、下边的时间必须大于上边得时间

 下边列出vue2和vue3不同版本的写法

vue2+element ui 

核心思想就是el-time-picker组件的picker-options属性，利用selectableRange 获取最小时间

 

html部分如下：

<div v-for="(it, index) in datass" :key="it.num">
    任务{{ index + 1 }}:
    <el-tooltip class="item" effect="dark" content="下边时间须大于上边时间" placement="top">
        <el-time-picker popper-class="time-picker" placeholder="选择操作时间" size="mini" 
            v-model="it.time" value-format='HH:mm' format="HH:mm" 
            :picker-options="{format: 'HH:mm',selectableRange: getMinTime(index)}" 
            :disabled="index != 0 && !datass[index - 1].time ? true : false"
            @change="changeTime(index)">
        </el-time-picker>
    </el-tooltip>
</div>

js部分如下：

    // 获取监听时间的最小值   使下边的时间大于上边的
    getMinTime(index) {
      if (index == 0) {
        return '00:00:00 - 23:59:59'
      } else {
        let hours = this.datass[index - 1].time.split(":")[0] * 1
        let mis = this.datass[index - 1].time.split(":")[1] * 1
        if (mis == 59) {
          hours += 1
          mis = 0
        } else {
          mis += 1
        }
        hours = hours < 10 ? '0' + hours : hours
        mis = mis < 10 ? '0' + mis : mis
        let minTime = hours + ':' + mis + ':00 - 23:59:59'
        return minTime
      }
    },
    // 监听修改定时时间 如果前面的时间修改为比后边的大的  后边所有的时间设置'23:59'
    changeTime(index) {
      // 最后一个不用判断
      if (index != 7) {
        if (this.CompareDate(this.datass[index].time, this.datass[index + 1].time)) {
          for (let i = index + 1; i < 8; i++) {
            this.datass[i].time = '23:59'
          }
        }
      }
    },
    // 比较时间时分大小 判断前面的时间是否大于后边的
    CompareDate(t1, t2) {
      var date = new Date();
      var a = t1.split(":");
      var b = t2.split(":");
      return date.setHours(a[0], a[1]) > date.setHours(b[0], b[1]);
    },

vue3+element plus 

思想：由于element plus中的el-time-picker组件没有picker-options了，我们便不能使用vue2的写法了，我们可以利用新加的disabled-hours和disabled-minutes来控制每个时间选择器可以选择的时间

html部分代码：

<div v-for="(it, index) in datass" :key="it.num">
    <div>任务{{ index + 1 }}:</div>
    <el-tooltip effect="dark" content="下边时间须大于上边时间" placement="top">
        <div class="example-basic">
            <el-time-picker v-model="it.time" format="HH:mm" placeholder="选择操作时间"                 
                size="small" @change="changeTime(index)"
                :disabled-hours="() => disabledHours(index)"
                :disabled-minutes="(e) => disabledMinutes(e, index)"
                :disabled="index != 0 && !datass[index - 1].time ? true : false"  />
        </div>
    </el-tooltip>
</div>

 js部分代码：

const disabledHours = (index) => {
  let minHours = datass.value[index - 1]?.time.getHours()
  if (index != 0) {
    return makeRange(0, minHours - 1)
  } else {
    return []
  }
}

const disabledMinutes = (hour, index) => {
  let minMinutes = datass.value[index - 1]?.time.getMinutes()
  let lastHours = datass.value[index - 1]?.time.getHours()
  if (index == 0) {
    return []
  } else {
    if (hour > lastHours) {
      return []
    } else {
      return makeRange(0, minMinutes)
    }
  }

}
// 返回一个范围
const makeRange = (start, end) => {
  const result = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}

// 监听修改时间 如果修改将后边的时间全部置为'23:59'
const changeTime = (index) => {
  for (let i = index + 1; i < 8; i++) {
    datass.value[i].time = converTime('23:59')
  }
}