当前月份3月
默认显示的是当前月与下一月
image.png
想要实现显示当前月与上一月
image.png
思路：在点击选择日期时，调用element中的上月小按钮的事件
首先给日期组件
el-date-picker添加一个父级盒子，绑定一个点击事件，在点击选择日期时，将触发上一月的按钮点击事件
<span @click="changeInitCalendarPage">
<el-date-picker popper-class="change-init-calendar-page" v-model="refreshCacheForm.refreshCacheTime" size="small" style="width:240px;" type="daterange" value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
</span>
给el-date-picker添加一个popper-class属性,用来区分当前的日期组件，防止页面中其他日期组件跟着变化
image.png
在data中定义一个变量
changeInitCalendarPageFlag，初始值为false在点击列表中的刷新缓存时，弹出弹框，将
changeInitCalendarPageFlag变成true
image.png
点击日期控件弹出日期时，判断
changeInitCalendarPageFlag是否为true，是true，调用上一月的事件，否则就不调用，这里是防止一直点击日期选择框，导致显示的日期一直调用上一月的事件
changeInitCalendarPage() {
if (this.changeInitCalendarPageFlag) {
this.changeInitCalendarPageFlag = false
// 先获取到组件里面 上个月小箭头的按钮 然后触发他的点击事件
let leftbtn1 = document.querySelectorAll('.change-init-calendar-page button.el-icon-arrow-left')
if (leftbtn1 && leftbtn1.length && leftbtn1[0]) leftbtn1[0].click();
this.$nextTick(() => {
let leftbtn2 = document.querySelectorAll('.change-init-calendar-page button.el-icon-arrow-left')
if (leftbtn2 && leftbtn2.length && leftbtn2[1]) leftbtn2[1].click();
})
}
},
在重置按钮里面也将changeInitCalendarPageFlag置为true
image.png
