el-calendar日历自定义显示内容

版本信息：

 之前我整理了一篇VUE+Element-ui实战之el-calendar日历自定义显示内容

有码友在评论区里分享了更简介的方式，看到后一直想尝试一下，所以本篇就是来 填坑的。

 按照提供的思路我尝试了一下，现将全部代码贴出来，以供大家交流

<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('-') }}
                <el-tag type="danger" v-if="scheduleData[data.day]">
                    {{scheduleData[data.day].content}}
                </el-tag>
                <!-- </div> -->
            </template>
        </el-calendar>
    </div>
</template>
 
<script>
export default {
    name: "PatrolSchedule",
    components: {},
    data() {
        return {
            scheduleData: {
                "2022-08-01": { content: "土方开挖" },
                "2022-08-08": { content: "地基验坑" },
                "2022-08-11": { content: "地基回填" },
                "2022-08-22": { content: "基础垫层膜" },
                "2022-08-26": { content: "基础垫层混凝土浇筑" },
                "2022-08-30": { content: "基础钢筋绑扎" },
            },
        };
    },
    mounted() {},
    methods: {},
};
</script>
<style scoped>
/deep/.el-calendar-day {
    box-sizing: border-box;
    padding: 5px;
    height: 80px;
}
</style>

页面显示效果如下

 

注：相比于之前的方案，少了日期的判断，直接显示数据内容

看到上边的评论里还提到“content一直未定义”，是因为日期显示时，数据里并不是每天的content都有值，所以为了避免出现这个错误，我这边加了v-if="scheduleData[data.day]"的判断。