在 Vue 项目中集成 Element UI 的日历组件时,往往需要自定义单元格来展示具体的日程信息。下面分享一套完整的实现方案,涵盖模板搭建、事件监听以及数据联动。
1. 模板结构
模板部分主要依赖 el-calendar 组件。通过自定义 dateCell 插槽,我们可以控制每一天的显示内容,比如高亮选中状态并列出当天的工作任务。
<el-calendar v-model="日期">
<template slot="dateCell" slot-scope="{date, data}">
<div class="date-cell" :class="data.isSelected ? 'is-selected' : ''">
<div class="calendar-day">
{{ data.day.split('-').slice(2).join('-') }}{{ data.isSelected ? '✔️' : ''}}
</div>
<div v-for="(item, index) in formatSchedule(data)" :key="index" class="subject_info">
{{ item['工作内容'] }}
</div>
</div>
</template>
</el-calendar>
这里注意,时间字符串的处理使用了 split 和 slice 来截取日期的日部分,同时根据选中状态渲染对勾图标。
2. 交互事件监听
为了支持月份切换和数据刷新,原生组件的事件有时不够灵活,这里采用 DOM 监听的方式捕获前一月、后一月、今天以及具体日期的点击行为。注意,这种方式依赖于 Element UI 的内部类名,升级组件版本时需留意兼容性。
mounted() {
this.$nextTick(() => {
prevBtn = .();
(prevBtn) {
prevBtn.(, {
(.[] == ) ;
.();
});
}
todayBtn = .();
(todayBtn) {
todayBtn.(, {
(.[] == ) ;
.();
});
}
nextBtn = .();
(nextBtn) {
nextBtn.(, {
(.[] == ) ;
.();
});
}
cells = .();
cells.( {
element.(, {
(.[] == ) ;
.();
});
});
});
},

