前言:
最近想实现一个日历,并且在日历里面添加备注,查找了一下,其实很简单,可通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容
具体代码如下:
<el-calendar>
<template #dateCell="{data}">
<div class="calendar-item">
<div class="calendar-time">
{{ data.day.split('-').slice(2).join('')}}
</div>
<div>
<span class="remark-text calendar-time" v-for="(item, index) in dealMyDate(data.day)" :key="index">
{{ item }}
</span>
</div>
</div>
</template>
</el-calendar>
相关逻辑
const resDate = reactive([
{ date: '2021-09-30', content: '放假' },
{ date: '2021-10-01', content: '放假' },
{ date: '2021-10-02', content: '划水' },
{ date: '2021-10-24', content: '学习vue' },
{ date: '2021-10-25', content: '学习vue' },
{ date: '2021-10-26', content: '学习vue' },
{ date: '2021-10-27', content: '学习vue' },
{ date: '2021-10-28', content: '学习vue' },
])
const dealMyDate = (v) => {
let res = '';
for (let index = 0; index < resDate.length; index++) {
if (resDate[index].date == v) {
res = resDate[index].content;
break;
}
}
return res;
}
样式文件
.remark-text {
font-size: 8px;
}
.calendar-item {
flex-direction: column;
}
.calendar-time {
height: 16px;
line-height: 16px;
}