由于自定义表格的点击事件,日期页面跳转出现bug,直接禁用灰色区域跳转,只使用三个按钮跳转月份:
禁用灰色区域的css:
/*calendar_class 是el-calendar所在父标签的css*/
.calendar_class >>>.el-calendar-table:not(.is-range)
td.next{
pointer-events: none;
}
.calendar_class >>>.el-calendar-table:not(.is-range)
td.prev{
pointer-events: none;
}
今天,上个月,下个月点击事件:
created(){
this.$nextTick(() => {
// 点击前一个月
let prevBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(1)"
);
prevBtn.addEventListener("click", e => {
this.modelMonth = this.$moment(this.modelMonth).format('YYYY-MM')
this.fetchData()
})
//点击今天
let todayBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(2)"
);
todayBtn.addEventListener("click", () => {
this.modelMonth = this.$moment(this.modelMonth).format('YYYY-MM')
this.fetchData()
})
//点击下一个月
let nextBtn = document.querySelector(
".el-calendar__button-group .el-button-group>button:nth-child(3)"
);
nextBtn.addEventListener("click", e => {
this.modelMonth = this.$moment(this.modelMonth).format('YYYY-MM')
this.fetchData()
})
});
},