element-plus el-calendar日历组件中添加备注

3,790 阅读1分钟

前言:

最近想实现一个日历,并且在日历里面添加备注,查找了一下,其实很简单,可通过设置名为 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;
}

日历备注展示如下: