element timeselect 怎么控制某段时间不能选择

对于 element timeselect 组件，要控制某段时间不能选择，你可以使用 disabledHours、disabledMinutes、disabledSeconds 和 disabledDate 属性来实现。

1. disabledHours: 设置不可选择的小时。可以传入一个函数，根据函数的返回值来判断哪些小时是不可选择的。例如，禁止选择 9 点到 18 点之间的小时：

<template>
  <el-time-select
    v-model="selectedTime"
    :picker-options="pickerOptions"
  ></el-time-select>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '',
      pickerOptions: {
        disabledHours: () => {
          return [9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
        },
      },
    };
  },
};
</script>

2. disabledMinutes: 设置不可选择的分钟。可以传入一个函数，根据函数的返回值来判断哪些分钟是不可选择的。例如，禁止选择 30 分钟之后的时间：

<template>
  <el-time-select
    v-model="selectedTime"
    :picker-options="pickerOptions"
  ></el-time-select>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '',
      pickerOptions: {
        disabledMinutes: () => {
          const now = new Date();
          if (now.getMinutes() >= 30) {
            return Array.from({ length: 60 }, (_, i) => i);
          } else {
            return Array.from({ length: now.getMinutes() + 1 }, (_, i) => i);
          }
        },
      },
    };
  },
};
</script>

3. disabledSeconds: 设置不可选择的秒数。可以传入一个函数，根据函数的返回值来判断哪些秒数是不可选择的。例如，禁止选择当前秒数之后的时间：

<template>
  <el-time-select
    v-model="selectedTime"
    :picker-options="pickerOptions"
  ></el-time-select>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '',
      pickerOptions: {
        disabledSeconds: () => {
          const now = new Date();
          if (now.getSeconds() >= 30) {
            return Array.from({ length: 60 }, (_, i) => i);
          } else {
            return Array.from({ length: now.getSeconds() + 1 }, (_, i) => i);
          }
        },
      },
    };
  },
};
</script>

4. disabledDate: 设置不可选择的日期。可以传入一个函数，根据函数的返回值来判断哪些日期是不可选择的。例如，禁止选择指定的日期范围：

<template>
  <el-date-picker
    v-model="selectedDate"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
      pickerOptions: {
        disabledDate: (date) => {
          const start = new Date('2022-01-01');
          const end = new Date('2022-12-31');
          return date < start || date > end;
        },
      },
    };
  },
};
</script>

通过设置上述属性，你就可以在 element timeselect 组件中控制某段时间不能选择了。希望对你有所帮助！