vue3elementui时间选择器如何显示今天的日期

在Vue3中使用Element UI的时间选择器组件，你可以通过设置初始值或v-model绑定到组件上来指定默认显示今天日期。Element UI的TimePicker组件有一个props叫做`default-value`，可以用来设置默认选中的时间。以下是一个简单的示例：

<template>
  <el-time-picker v-model="currentTime" placeholder="请选择时间">
    <!-- 如果你想显示今天开始的时间 -->
    <el-option
      label="今日"
      value="00:00:00"
      :key="0"
    ></el-option>
  </el-time-picker>
</template>

<script setup>
import { ref } from 'vue';
const currentTime = ref(new Date().toLocaleTimeString()); // 默认显示当前时间
</script>

在这个例子中，`currentTime`是当前时间的引用，在组件渲染时会自动更新为当前时间。如果你想显示今天零点作为默认值，可以直接将`value`设置为`"00:00:00"`。

如果你希望每次都显示当天的日期，而不是时间，可以稍微调整下代码，使用`Date`对象获取当前日期，并清空时间部分：

<template>
  <el-date-picker
    type="datetime"
    v-model="todayDate"
    placeholder="请选择日期"
  ></el-date-picker>
</template>

<script setup>
import { ref } from 'vue';

// 获取当前日期并清空时间
const todayDate = ref(() => {
  const now = new Date();
  return `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
});
</script>

这里使用了`el-date-picker`组件，它更专注于日期的选择。记得在`type`属性上设置为`"datetime"`以允许用户同时选择日期和时间。