ElementUI 时间选择器如何限定选择时间

在ElementUI中，时间选择器组件<el-time-picker>提供了picker-options属性，可以用来限定可选择的时间范围。此外，还可以使用selectableRange属性直接限定时间范围。

以下是一个例子，展示如何使用picker-options来限定时间选择器只能选择上午9点到下午5点之间的时间：

<template>
  <el-time-picker
    v-model="time"
    :picker-options="{
      selectableRange: '09:00:00 - 17:00:00'
    }"
    placeholder="选择时间">
  </el-time-picker>
</template>
 
<script>
export default {
  data() {
    return {
      time: ''
    };
  }
};
</script>

如果你想要更复杂的时间限制，例如，只允许用户选择今天之后的时间，可以使用函数来定义selectableRange：

<template>
  <el-time-picker
    v-model="time"
    :picker-options="pickerOptions"
    placeholder="选择时间">
  </el-time-picker>
</template>
 
<script>
export default {
  data() {
    return {
      time: '',
      pickerOptions: {
        selectableRange: this.getSelectableRange()
      }
    };
  },
  methods: {
    getSelectableRange() {
      const now = new Date();
      let h = now.getHours();
      let m = now.getMinutes();
      // 限定时间范围为当前时间之后的所有时间
      return `${h}:${m}:00 - 23:59:59`;
    }
  }
};
</script>

在这个例子中，getSelectableRange方法动态计算了当前时间之后的所有时间可以被选择。这样就可以根据实际需求灵活地限定时间选择器的行为。