- 原样式
- 修改以后
<el-calendar v-model="value">
<template slot="dateCell" slot-scope="{date, data}">
<el-popover popper-class="popoverBackB" placement="top" @show="handerShow(date, data)" width="200" trigger="hover" :content="dateText">
<div class="calendar-day" slot="reference" @click="clickData">{{ data.day.split('-').slice(2).join('-') }}</div>
</el-popover>
</template>
</el-calendar>
data() {
return {
value: new Date(),
}
}
+ 方法
handerShow(date, data) {
this.dataDay = data.day
appointMessage({ date: data.day }).then(res => {
if (res.data) {
this.dateText = `今日预约数${res.data}条`
} else {
this.dateText = '没有数据'
}
})
},
clickData() {
this.$router.push({
path: '/customercenter/reserverecord',
query: {
currentTab: 1,
comeDate: this.dataDay
}
})
},
/deep/ {
.el-calendar-table .el-calendar-day {
height: 52px;
text-align: center;
line-height: 36px;
}
.el-calendar-table__row td {
border: 0;
border-radius: 50%;
}
.el-calendar-table tbody {
border-left: 1px solid red !important;
}
.el-calendar-table tr td:first-child {
border: none;
}
.el-calendar-table tr:first-child td {
border: none;
}
.el-calendar-table td.is-selected {
background-color: #2c51ef;
color: #fff;
}
.el-calendar-table td.is-selected {
border-radius: 50%;
}
.el-calendar-table .el-calendar-day:hove {
border-radius: 50%;
background-color: #2c51ef !important;
color: #fff;
}
.el-calendar-table .el-calendar-day:hover {
border-radius: 50%;
color: #fff;
background-color: #2c51ef !important;
}
.el-calendar-table thead th:before {
content: "周";
}
}
可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试