vue3 element-plus格式化TimePicker的model值

在 Vue3 中使用 Element Plus 的 TimePicker 组件时，如果要格式化其 model 值，可以使用 `v-model:value` 绑定一个计算属性，并在计算属性中进行格式化。

具体的步骤如下：

1. 首先，在组件中使用 TimePicker 组件，并绑定 v-model:value：

<el-time-picker v-model:value="time"></el-time-picker>

2. 在组件中定义一个计算属性，用于格式化 time 值：

import { ref, computed } from 'vue';
import dayjs from 'dayjs';

export default {
  setup() {
    const time = ref('12:00');

    const formattedTime = computed(() => {
      return dayjs(`1970-01-01T${time.value}`).format('HH:mm');
    });

    return {
      time,
      formattedTime,
    };
  },
};

上述代码中，我们使用了 dayjs 库来对时间进行格式化。在计算属性中，我们将 `time` 的值转换为 dayjs 对象，并使用 `format` 方法将其格式化为 `HH:mm` 格式。最终，我们将格式化后的值绑定到 `formattedTime` 上。

3. 最后，在模板中使用计算属性：

<el-time-picker v-model:value="time"></el-time-picker>
<p>Formatted time: {{ formattedTime }}</p>

这样就可以在页面上显示格式化后的时间了。需要注意的是，由于 v-model:value 是双向绑定的，所以在修改时间时需要同时更新 `time` 和 `formattedTime` 的值。