element-plus日历选择一年之后，展示每个月份的日历

### 实现Element Plus日历组件按年份展示每月日历 为了实现用户需求，在 Vue3 和 `<script setup>` 结合 Element Plus 的场景下，可以通过自定义逻辑完成这一目标。以下是具体的方法： #### 使用 `Calendar` 组件并扩展其功能 通过监听用户的交互行为（如选择某一天或某个范围），可以动态调整视图以显示整年的日历数据。核心思路在于利用 `renderCell` 属性来自定义单元格渲染，并结合外部状态管理月份和年份。 ```vue <template> <div class="calendar-container"> <!-- 年份选择 --> <el-select v-model="selectedYear" placeholder="请选择年份" style="margin-bottom: 20px;"> <el-option v-for="(year, index) in years" :key="index" :label="`${year}年`" :value="year" /> </el-select> <!-- 每个月的日历 --> <div v-if="showMonthlyCalendars"> <el-calendar v-for="(month, idx) in months" :key="idx" :model-value="getMonthDate(selectedYear, month)"> <template #date-cell="{ date }"> <p v-if="isSpecialDay(date)" class="special-day">{{ getDotContent(date) }}</p> </template> </el-calendar> </div> </div> </template> <script setup> import { ref, computed } from 'vue'; // 定义年份选项 const currentYear = new Date().getFullYear(); const years = Array.from({ length: 10 }, (_, i) => currentYear - i); // 当前选中的年份 const selectedYear = ref(currentYear); const showMonthlyCalendars = ref(false); // 控制是否显示月度日历 // 获取指定年份和月份的第一天 function getMonthDate(year, month) { return new Date(`${year}-${String(month).padStart(2, '0')}-01`); } // 判断特定日期是否有标记 function isSpecialDay(date) { const specialDays = [ new Date('2023-07-04'), new Date('2023-08-15') ]; return specialDays.some(day => day.toDateString() === date.toDateString()); } // 返回特殊日期的内容 function getDotContent(date) { return '*'; // 可替换为实际内容 } // 计算月份数组 const months = computed(() => Array.from({ length: 12 }, (_, i) => i + 1)); </script> <style scoped> .special-day { color: red; } .calendar-container .el-calendar { margin-top: 20px; } </style> ``` 上述代码实现了以下功能： 1. 提供了一个可选择的年份列表。 2. 用户选定年份后，会自动加载该年每月份的日历。 3. 对于某些特殊的日期进行了标注处理[^1]。 #### 解决国际化问题 如果需要支持多语言环境，则需引入 Element Plus 的国际化配置文件。例如，切换到中文界面可通过如下方式实现[^3]: ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import zhCn from 'element-plus/es/locale/lang/zh-cn'; createApp(App) .use(ElementPlus, { locale: zhCn }) .mount('#app'); ``` #### 处理可能存在的事件触发异常 针对可能出现的重复触发事件情况，比如 `@change` 被调用了两次以上的情况，建议采用防抖函数或者手动控制回调次数的方式加以规避[^4]: ```javascript let changeTriggered = false; watch(selectedYear, (newVal, oldVal) => { if (!changeTriggered && newVal !== oldVal) { changeTriggered = true; console.log(`Selected year changed to ${newVal}`); setTimeout(() => { changeTriggered = false; }, 0); } }); ``` --- ###