先说结果,给el-date-picker组件的父容器绑定一个@click.once事件,在初次点击时去触发切换到上一个月的按钮的点击事件。
由于需求是可选范围截至至今天,也就是说今天之后的范围全部是禁用的,在不做修改的情况下效果是这个样子的。
显然看起来特别的不美观。
一开始想到的解决方案就是去触发点击事件,但是在mounted中写了之后发现这个组件是懒加载的,必须要第一次展开之后才会出现在dom结构中,于是就想到了给父容器增加点击事件,幸好在父容器的点击事件触发时calendar已经生成了。
贴上代码:
<div @click.once="changeInitCalendarPage">
<el-date-picker
v-model="calendarDate"
type="daterange"
format="yyyy-MM-dd"
>
</el-date-picker>
</div>
changeInitCalendarPage() {
let element = document.querySelector("button.el-picker-panel__icon-btn.el-icon-arrow-left");
if (element) element.click();
}
"button.el-picker-panel__icon-btn.el-icon-arrow-left" 就是日历上一页按钮的属性,如果一个页面有多个日历控件那么得到的element可能会是个数组,因为我的需求不需要多个所以没有尝试,有需求请自行更改。
贴上最终效果图: