这是最后实现的效果，需要用圈来标记日期，有红色的标记和黄色的标记，开始找了很多插件，但是没有找到合适的能实现效果了，最后看到了其他相似的例子实现了这个需求
<el-calendar v-model="value" class="cal"><template slot="dateCell" slot-scope="{ date, data }"><pv-if="handleSelected(data.day) == '1'"class="calendar_circle1"@click="clickCalendar(data)">{{data.day.split("-").slice(2).join("-") }}</p><pv-if="handleSelected(data.day) == '2'"class="calendar_circle2"@click="clickCalendar(data)">{{data.day.split("-").slice(2).join("-") }}</p><pv-if="handleSelected(data.day) == '3'"class="calendar_circle3"@click="clickCalendar(data)">{{data.day.split("-").slice(2).join("-") }}</p></template></el-calendar>
这是日历的组件。
handleSelected(day) {let flag = "1"; //默认显示为0// 没有交易年度 2深色有 3浅色无this.hasYearNot.forEach((item) => {if (item == day) {//判断显示数据flag = "3";return;}});this.hasYear.forEach((item) => {if (item == day) {//判断显示数据flag = "2";return;}});return flag;},
hasYearNothasYear这两个数组是需要被标记的日期。后台需要返回的数据格式,需要后台标识好我们需要标记的日期。
//请求获取后台返回的数据，需要后台做好标识，哪个日期需要标记什么颜色getCal(val) {let month = new Date(val).getMonth() + 1;let year = new Date(val).getFullYear();getHomeNotice({orgId: Id, issue: `${year}-${month}` }).then((res) => {for (let key in res.data) {if (res.data[key] == "1") {this.hasYearNot.push(key);} else if (res.data[key] == "2") {this.hasYear.push(key);}}});}{"status":200,"msg":"查询成功","rel":true,"data":{"-06-20":"2","-06-21":"2","-06-22":"1"}}
.cal ::v-deep.el-calendar-day .calendar_circle1 {margin: 0 auto;padding: 2px;text-align: center;}.cal ::v-deep.el-calendar-day .calendar_circle2 {border: 1px solid #DE4747;border-radius: 50%;margin: 0 auto;padding: 2px;text-align: center;}
给不同的圈设置不同的样式。
ending~~~~~
