elementUI组件事件标注，需要用到slot插槽去处理：
<template> <el-col :span="24"> <section class="container"> <el-row :gutter="30"> <!-- 左边 --> <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14"> <!-- 日历 --> <el-calendar v-model="calendarValue" @change="getvisitList"> <template slot="dateCell" slot-scope="{ date, data }"> <p style="text-align: center" :class="dealMyDate(data.day) ? 'activeClass' : ''" > {{ data.day.split("-").slice(1).join("-") }}<br /> <!-- {{ dealMyDate(data.day) ? "✔️" : "" }} --> </p> </template> </el-calendar> </el-col> </el-row> </section> </el-col></template><script>import urls from "@/admin/api/urls";import { visitList } from "@/admin/api/clientManager/index.js";import XEUtils from "xe-utils";export default { data() { return { visitData: [], // resDate: [], }; }, watch: { calendarValue: { handler: function (newVal, oldVla) { this.getvisitList( XEUtils.toDateString(new Date(newVal), "yyyy-MM") + "-" + "01", newVal ); }, }, }, mounted() { this.getvisitList(); }, methods: { dealMyDate(v) { let len = this.resDate.length; let res = ""; for (let i = 0; i < len; i++) { if (this.resDate[i] == v) { res = this.resDate[i]; break; } } return res; }, //列表 getvisitList(data, currentData) { var data = { monthDate: data ? data : XEUtils.toDateString(new Date(), "yyyy-MM") + "-" + "01", creatorId: JSON.parse(getStore("user")).userId, }; visitList(data).then((res) => { if (res.data.code == 200) { this.visitData = res.data.data; this.visitData1 = res.data.data; this.visitData.map((item) => { var time = item.beginTime.split(" ")[0]; if (this.resDate.indexOf(time) == -1) { this.resDate.push(time); } }); var monthDate = new Date( XEUtils.toDateString(currentData, "yyyy-MM-dd") ).getTime(); var arr = []; arr = this.visitData1.filter(function (item) { var time = new Date( XEUtils.toDateString(item.beginTime, "yyyy-MM-dd") ).getTime(); if (time == monthDate) { item.isSelected = true; return item; } }); this.visitData = arr; } }); }, },};</script><style lang="less" scoped>/deep/.el-calendar-table td.is-selected { background: #f57878; color: #fff;}/deep/.el-calendar-table .el-calendar-day:hover { background: #f57878; color: #fff;}/deep/.el-calendar-table td.is-today { background: #23b91f; color: #fff;}/deep/.el-calendar-table .el-calendar-day { line-height: 51px;}.activeClass { width: 0.5rem; height: 0.5rem; margin: auto; border: 1px solid red; border-radius: 50%; color: red; margin-top: 0.1rem;}</style>
最终的效果图，样式可以自己设置。
