這只是個子組件

<template><div ref="topBox" class="swiper-in page-container bg-white"><div class="w-full page-head">我的排班<i class="close-btn el-icon-close" @click="closeCurrentPage"></i></div><div class="page-body"><div class="topbox"><span style="color: #66b1ff">月份：</span><el-date-picker v-model="day" value-format="yyyy-MM" type="month" placeholder="選擇月" style="margin-right: 1rem; overflow: inherit" :clearable="false" ></el-date-picker><span style="color: #66b1ff">排班性質：</span><el-select v-model="typesettingNypevalue" placeholder="請選擇" style="margin-right: 1rem; display: inline-flex" clearable ><el-option v-for="item in typesettingType" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" ></el-option></el-select><el-button type="primary" @click="getlist">查詢</el-button><el-button type="primary" @click="clearlist">刷新</el-button></div><!-- 我的日歷 --><div><el-calendar v-model="day" id="calendar"><!-- 這里使用的是 2.5 slot 語法，對于新項目請使用 2.6 slot 語法--><template slot="dateCell" slot-scope="{ date, data }"><!--自定義內容--><div><div class="calendar-day"><span class="everyDay">{{ data.day.split("-").slice(2).join("-") }}</span><div v-for="item in daylist" :key="item.yysj" @dblclick="calendarOnClick(item)" style="overflow: auto" ><div class="is-selected" v-if="item.yysj.indexOf(data.day) != -1" style="background: #e5ffff; margin: 5px" ><p>普通：({{ item.p.num }} / {{ item.p.sum }})</p><p>專家：({{ item.z.num }} / {{ item.z.sum }})</p><p>特需：({{ item.t.num }} / {{ item.t.sum }})</p></div></div></div></div></template></el-calendar></div></div></div> </template> <script> import { pbInfo } from "@/api/systemDiagnosisApi/index"; export default {components: {},data() {return {day: new Date(), // 日期typesettingNypevalue: "",// 排班類型typesettingType: [{value: "1",label: "普通排班",},{value: "2",label: "專家排班",},{value: "3",label: "特需排班",},],daylist: [],};},created() {this.getApp();this.$nextTick(() => {// 點擊前一個月let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(1)");prevBtn.addEventListener("click", (e) => {this.getApp();});//點擊下一個月let nextBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(3)");nextBtn.addEventListener("click", () => {this.getApp();});//點擊今天let todayBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(2)");todayBtn.addEventListener("click", () => {this.getApp();});});},methods: {getApp() {//通過接口獲取某月某日中的未完成任務，已完成任務，今日任務var aa = "";if (this.day != null && this.day != "") {var year = this.day.getFullYear();var day = this.day.getDate();var month = this.day.getMonth() + 1;if (month < 10) {month = "0" + month;}if (day < 10) {day = "0" + day;}aa = year + "-" + month + "-" + day;}this.listinfo(aa);},listinfo(val) {pbInfo({month: val,schedulingNature: this.typesettingNypevalue,}).then((res) => {this.daylist = res.data;}).catch((err) => {console.log(err);});},getlist() {this.listinfo(this.day);},clearlist() {(this.day = new Date()), // 日期(this.typesettingNypevalue = ""),this.getApp();},//點擊日期塊calendarOnClick(e) {this.$store.commit("pushcode", e);this.openChildPage(0.7, "mytypesetting", true, true);},closeCurrentPage() {this.$router.go(-1);this.$store.commit("closeInitPage");},}, }; </script> <style scoped> .topbox {margin: 1rem; } .calendar-day {text-align: center;color: #202535;font-size: 0.75rem;height: 100%; } .is-selected {padding-top: 5px; } .calendarbox::-webkit-scrollbar {/*滾動條整體樣式*/width: 5px; /*高寬分別對應橫豎滾動條的尺寸*/height: 1px; } .calendarbox::-webkit-scrollbar-thumb {/*滾動條里面小方塊*/border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #4989ff; } .calendarbox::-webkit-scrollbar-track {/*滾動條里面軌道*//* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */border-radius: 10px;background: #ffffff; } /deep/ .el-calendar-table thead {text-align: center; } /deep/ .el-calendar__body {padding: 10px 12px; } /deep/ .el-calendar-table .el-calendar-day {box-sizing: border-box;padding: 8px;height: 115px; } .page-body {overflow: none; }#calendar.el-button-group> .el-button:not(:first-child):not(:last-child):after {content: "當月"; } </style>

總結

以上是生活随笔為你收集整理的element 日历组件-自定义内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。