element el-time-picker 两边任意时段都设置可选, 如何取消自带的禁用功能

在Element UI的时间选择器`el-time-picker`中，如果你想要取消默认时段的禁用，允许用户在指定的两个时间点之间的任意时段选择，你需要自定义其选项并覆盖其内置的行为。这里是一种可能的做法：

1. 首先，确保你已经安装了Element UI并且对它的API有基本了解。

2. 定义一个自定义的时间选项数组，包含你希望允许选择的所有时间段。例如，假设你想让用户在6:00到22:00之间选择：

const customHours = Array.from({ length: 24 }, (_, i) => {
  // 如果i不在6到22之间，设为disabled状态
  return { value: `${i}:00`, disabled: i < 6 || i > 22 };
});

3. 创建一个自定义的时间选择插件，可以继承自Element UI的时间选择组件，并覆盖`options`属性：

<template>
  <el-time-picker :picker-options="customPickerOptions" />
</template>

<script>
import { ElTimePicker } from 'element-plus';

export default {
  components: {
    CustomTimePicker: {
      extends: ElTimePicker,
      props: {
        customOptions: {
          type: Object as any,
          default: () => ({
            start: { hours: 6, minutes: 0 },
            end: { hours: 22, minutes: 0 },
            format: 'HH:mm',
            // 使用自定义时间数组作为选项
            values: customHours
          }),
        },
      },
      computed: {
        customPickerOptions() {
          return this.customOptions;
        }
      },
    },
  },
};
</script>

4. 在你的组件中使用自定义时间选择器：

<CustomTimePicker @change="handleTimeChange" :customOptions="customOptions" />

5. 当然，别忘了处理`handleTimeChange`方法，以便在用户选择时间后更新相应的数据。