el-time-select如何设置多个时间段失效

`el-time-select`是Element UI中的一个时间选择组件，如果你想在Element UI的时间选择器中设置多个时间段无效，你可以通过自定义渲染和逻辑控制来实现。以下是一种可能的做法：

1. 首先，在数据层面上，创建一个包含有效时间段的对象数组，每个对象都有开始时间和结束时间。

data() {
  return {
    timeRanges: [
      { startTime: '08:00', endTime: '12:00' },
      { startTime: '14:00', endTime: '18:00' }, // 其他无效时间段
      { startTime: '19:00', endTime: '22:00' }
    ],
    selectedTimeRange: null,
  };
}

2. 然后，在模板中使用v-model绑定到`selectedTimeRange`，并在每个时间段上添加一个`disabled`属性，根据当前选中的时间段和其他已知无效时间段判断是否禁用。

<template>
  <el-time-select v-model="selectedTimeRange" :picker-options="pickerOptions">
    <template slot-scope="{ value }">
      <el-time-range-picker
        :start-placeholder="startTimePlaceholder"
        :end-placeholder="endTimePlaceholder"
        :disabled="isDisabled(value)"
        v-for="(timeRange, index) in timeRanges"
        :key="index"
        :value="timeRange"
      ></el-time-range-picker>
    </template>
  </el-time-select>
</template>

3. 在`methods`中定义`isDisabled()`函数，检查当前选择的时间段与其他已知无效时间段是否有交集。

methods: {
  isDisabled(timeRange) {
    for (const invalidRange of this.timeRanges.filter(range => range !== timeRange)) {
      if (
        invalidRange.startTime <= timeRange.endTime &&
        invalidRange.endTime >= timeRange.startTime
      ) {
        return true;
      }
    }
    return false;
  }
}