**1.**首先接到的需求是这样的
**2.**从图片不难看出需求，需要根据下拉框的年月展示对应的年月份，并且只展示当前月日期，
计划随访时间与延期随访时间进行标注，选中的日期进行黄色标注并且回显到下拉框当中，
鼠标悬停哪个日期上面对应日期上出现悬停框。
**3.**于是基于el-calendar封装了一个可满足需求的组件，直接上代码，内含注释，可直接使用，上图即使效果图。
<template> <div class="followBox"> <p class="title">高血压随访日历</p> <div class="follow"> <el-select v-model="yearValue" placeholder="年" @change="selectChange" style="width:25%"> <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-select v-model="monthValue" placeholder="月" @change="selectChange" style="width:20%"> <el-option v-for="item in monthOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <div><span class="accurate accurate1"></span><span class="up1">计划随访</span></div> <div><span class="extension accurate1"></span><span class="up2">延期随访</span></div> </div> <el-calendar v-model="calendarValue" id="calendar"> <template slot-scope="{data}" slot="dateCell"> <div @click="chooseDay(data)" v-if="data.type==='current-month'"> <el-row> <el-col :span="10"> <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }} </div> </el-col> <el-col :span="4"> <div class="accurate" v-if="dealMyDate(data)===true"> </div> <div class="extension" v-if="dealMyDate(data)===false"> </div> </el-col> </el-row> </div> </template> </el-calendar> </div></template><script>export default { data () { return { //日历选中时间 calendarValue: '', //年下拉框 yearValue: '', //月下拉框 monthValue: '', //年数组 yearOptions: [], //月数组 monthOptions: [], } }, created () { this.init() }, methods: { //日历添加小圆点标识 dealMyDate (item) { let res = ""; //小圆点标记数组，true为红色，false为蓝色 this.potDate = [ { date: "2023-07-09", hasRecord: true }, { date: "2023-07-16", hasRecord: false } ] for (let i = 0; i < this.potDate.length; i++) { if (this.potDate[i].date === item.day) { res = this.potDate[i].hasRecord; break } } return res }, //获取年分数组 initSelectYear (year, labelast) { let yearsList = []; for (let i = 0; i < labelast; i++) { yearsList.push({ value: (year - i).toString(), label: (year - i).toString() }); } return yearsList }, //获取月分数组 monthGet (year, labelast) { let yearsList = []; for (let i = 0; i < labelast; i++) { yearsList.push({ value: (year - i < 10 ? (year - i).toString().padStart(2, 0) : (year - i).toString()), label: (year - i < 10 ? (12 - i).toString().padStart(2, 0) : (12 - i).toString()) }); } return yearsList }, //初始化 init () { const timeOne = new Date() const year = timeOne.getFullYear() let month = timeOne.getMonth() + 1 let day = timeOne.getDate() month = month < 10 ? '0' + month : month day = day < 10 ? '0' + day : day const NOW_MONTHS_AGO = `${year}-${month}-${day}` //获取当前年 this.yearValue = year //获取当前月 this.monthValue = month //获取当前年月日 this.calendarValue = NOW_MONTHS_AGO //获取年数组 this.yearOptions = this.initSelectYear(year, 10) //获取月数组 this.monthOptions = this.monthGet(12, 12) }, //点击日历回显下拉框 chooseDay (item) { this.yearValue = item.day.substring(0, 4) this.monthValue = item.day.substring(6, 7) this.calendarValue = item.day }, //下拉框选择完更新日历 selectChange () { if (this.yearValue && this.monthValue) { this.calendarValue = this.yearValue + '-' + this.monthValue } } },}</script><style lang="scss" scoped>.followBox { padding-top: 10px;}.title { margin: 0 10px 10px; width: 30%; text-align: center; background-color: #23305c; border-radius: 0 30px 30px 0;}.follow { padding-left: 20px; display: flex;}/deep/ .el-input__inner { background-color: #031e61; border: 2px solid #313854;}/**红色圆点 */.extension { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: red;}/**蓝色圆点 */.accurate { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #1472e5;}.accurate1 { margin: 0 5px 0 20px;}.up2 { color: red;}.up1 { color: #1472e5;}/deep/ .el-select { background-color: #031e61; color: #fff;}/*一 二 头部*//deep/ .el-calendar-table thead th { padding: 0; padding-left: 12px; text-align: left !important; font-size: 13px; color: #fff;}/* 去除边框 *//deep/ .el-calendar-table tr td:first-child { border: none;}/deep/ .el-calendar-table tr:first-child td { border: none;}/deep/ .el-calendar-table__row td { border: none;}/* 当前月样式 *//deep/ .el-calendar-table:not(.is-range) { color: #fff;}/*日历单元格鼠标悬停背景颜色*//deep/ .el-calendar-table .el-calendar-day:hover { background-color: #031e61; border: 1px solid #875e3c; color: #875e3c; border-radius: 15%;}/**鼠标点击后当后日样式 *//deep/ .el-calendar-table td.is-selected { background-color: #031e61 !important; border: 1px solid #875e3c !important; color: #875e3c !important; border-radius: 15% !important;}/deep/ .el-calendar { background-color: #031e61; font-size: 14px; .el-calendar-day { height: 35px !important; text-align: center; border: none; } .el-calendar__header { display: none; }}</style>
