el-date-picker年份选择器默认选择当前年份

`el-date-picker` 年份选择器来自 Element UI 库，默认情况下可以选择日期、周、月份或年份等不同类型的时间单位。当你希望年份选择器默认选中当前年份时，你需要设置其绑定值为当年的 `Date` 对象或者是直接指定年的数值。 为了更具体地帮助到您，在 Vue.js 中使用 `el-date-picker` 设置初始值为当前年份可以这样做： 首先确认已安装并引入了Element Plus库(这里假设你已经完成了这个步骤)。 然后可以在组件内部通过 JavaScript 获取当前时间，并将其传递给 year-picker 组件作为 v-model 的值。 下面是一个简单的例子: ```html <template> <div class="demo"> <!-- 使用v-model指令将yearPickerValue的数据属性与元素关联 --> <el-date-picker v-model="yearPickerValue" type="year" placeholder="Pick a year"></el-date-picker> {{ selectedYear }} <!-- 显示用户选定的内容 --> </div> </template> <script setup> import { ref, onMounted } from 'vue'; // 定义响应式变量存储所选年份，默认为空字符串表示未做选择 const yearPickerValue = ref(''); let selectedYear = ''; onMounted(() => { // 页面加载完成后自动填充今年的完整日期对象至输入框内 const currentDate = new Date(); // 将该Date对象赋值给yearPickerValue，使得element ui能够识别并显示正确的年份 yearPickerValue.value = currentDate; updateSelectedYear(currentDate); }); function updateSelectedYear(date){ if (date instanceof Date && !isNaN(date)) { let tempYear=date.getFullYear().toString(); // 转换为四位数的年份数字串 selectedYear=tempYear; } } </script> ``` 在这个案例里我们做了两件事情： 1. 创建了一个名为 `yearPickerValue` 的响应式的引用(`ref`)用于保存用户的选项； 2. 当页面挂载完成之后(onMounted钩子函数)，我们将获取今天的日期并通过它更新 `yearPickerValue`, 这样就能保证初次访问网页的时候就会展示出最新的那一年； 此外还定义了一个辅助性的方法叫做 `updateSelectedYear()` 来处理从 `Date Object` 到仅保留“YYYY”格式转换的问题. 注意：如果你只需要一个具体的数字而不是完整的 date object，则可以直接将 `.getFullYear() method` 的结果分配给 `v-model`. 最后提醒一下，确保你的项目依赖项包含了最新版本的 element-plus 和 vue ，并且按照官方文档正确配置好样式文件路径等相关事宜！