el-time-select 自定义按钮

您可以通过使用 `<el-time-select>` 组件的 `picker-options` 属性来自定义按钮。首先，您需要在 `<el-time-select>` 上添加一个 `ref` 属性，以便在 JavaScript 中访问到该组件实例。然后，您可以通过该实例的 `pickerOptions` 属性来配置按钮的文本和事件。

以下是一个示例代码：

<template>
  <div>
    <el-time-select v-model="selectedTime" ref="timePicker"></el-time-select>
    <button @click="customButtonClick">自定义按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: ''
    };
  },
  methods: {
    customButtonClick() {
      // 访问时间选择器组件实例
      const timePicker = this.$refs.timePicker;

      // 自定义按钮事件
      console.log('自定义按钮被点击');

      // 获取当前时间
      const currentTime = new Date();
      const currentHour = currentTime.getHours();
      const currentMinute = currentTime.getMinutes();

      // 设置时间选择器的值
      timePicker.pickerOptions = {
        start: '00:00',
        step: '00:15',
        end: `${currentHour}:${currentMinute}` // 设置结束时间为当前时间
      };

      // 打开时间选择器面板
      timePicker.visible = true;
    }
  }
};
</script>

在上述示例中，我们首先在 `<el-time-select>` 组件上添加了一个 `ref` 属性，命名为 "timePicker"。然后，在点击自定义按钮时，我们通过 `this.$refs` 来访问到该组件实例，进而可以操作时间选择器的各种属性和方法。

在 `customButtonClick` 方法中，我们首先通过 `console.log` 输出一条消息来表示按钮事件被触发。然后，我们获取当前的小时和分钟，并将其用作时间选择器的结束时间。最后，我们设置 `timePicker.pickerOptions` 的值，并将 `timePicker.visible` 设置为 `true` 来打开时间选择器面板。

您可以根据您的需求进一步自定义按钮的行为和样式。希望这能对您有所帮助！