element时间组件默认展示上月和本月

当前月份3月
默认显示的是当前月与下一月

image.png

想要实现显示当前月与上一月

image.png

思路：在点击选择日期时，调用element中的上月小按钮的事件
首先给日期组件el-date-picker添加一个父级盒子，绑定一个点击事件，在点击选择日期时，将触发上一月的按钮点击事件

给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