vue3 element-plus格式化TimePicker

在Vue3中使用Element-Plus的TimePicker组件，可以通过配置picker-options来格式化时间展示。具体实现步骤如下：

1. 在组件中引入TimePicker组件和formatTime方法。

<template>
  <el-time-picker
    v-model="time"
    :picker-options="pickerOptions"
    :format="formatTime"
  ></el-time-picker>
</template>

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

export default {
  components: {
    ElTimePicker,
  },
  setup() {
    const time = ref(null);

    // 格式化时间方法
    const formatTime = (date) => {
      return date.toLocaleTimeString();
    };

    // 配置picker-options
    const pickerOptions = {
      start: '00:00',
      end: '23:59',
      step: '00:15',
    };

    return {
      time,
      formatTime,
      pickerOptions,
    };
  },
};
</script>

2. 在formatTime方法中，使用toLocaleTimeString()方法将时间格式化为本地时间字符串。可以根据需要添加参数来自定义时间格式。

3. 在picker-options中配置start、end和step来设置时间选择器的起始时间、结束时间和时间间隔。

这样就可以通过formatTime方法和picker-options来格式化TimePicker组件的时间展示了。