VUE+Element-ui实战之el-calendar日历自定义显示内容

目录

1、确保添加el-calendar组件

2、遍历日期，确定显示内容

3、最终实现效果

4、完整代码

1、确保添加el-calendar组件

确保你的element引入了el-calendar组件，这里不再赘述

2、遍历日期，确定显示内容

3、最终实现效果

4、完整代码

<template><div class="main_con"><div style="text-align: left;"><H2>施工日志</H2><el-divider></el-divider></div><el-calendar><template slot="dateCell" slot-scope="{date, data}">{{ data.day.split('-').slice(1).join('-') }}<div style="width:100%;" v-for="item in scheduleData" :key="item"><el-tag type="danger" v-if="(item.workingDay).indexOf(data.day.split('-').slice(2).join('-'))!=-1">{{item.content}}</el-tag></div></template></el-calendar></div></template><script>export default {name: "PatrolSchedule",components: {},data() {return {value: new Date(),scheduleData: [{workingDay: "02",content: "土方开挖",},{workingDay: "03",content: "地基验坑",},{workingDay: "04",content: "地基回填",},{workingDay: "05",content: "基础垫层模",},{workingDay: "06",content: "基础垫层混凝土浇筑",},{workingDay: "07",content: "基础钢筋绑扎",},],};},mounted() {},methods: {},};</script><style scoped>/deep/.el-calendar-day {box-sizing: border-box;padding: 5px;height: 80px;}</style>