el-date-picker组件首次展开默认显示当上一个月和本月

遇到一个需求,elementUI的el-date-picker组件的下拉框默认显示的是本月至下月如图所示

要修改为默认显示上月至本月如图所示 

 之前试过使用官方文档的default-value, 但是他的作用是在没有数据的时候显示的内容(可以实现,但是一旦有数据还是会变成图1的样式),所以这里我试着使用获取节点触发点击左右选择月份的方法实操可行:

1.给el-date-picker组件的父容器绑定一个@click.once事件

<div @click.once="changeInitCalendarPage">
   <el-date-picker
        v-model="value1"
        popper-class="statistics__date-picker"
        type="daterange"
        format="yyyy-MM-dd"
      >
   </el-date-picker>
</div>

2.回调函数

const changeInitCalendarPage=()=> {
   //获取dom节点 先行点击左侧的月份下拉框的左箭头按钮
   let element_1 = document.querySelectorAll(".statistics__date-picker .el-date-range-picker .el-date-range-picker__header .arrow-left");
    
   if (element_1 && element_1.length && element_1[0]) element_1[0].click();
   //等待dom更新后再次点击右侧的月份下拉框的左箭头(因为如果右边月份下拉框必须大于左边月份下拉框 
   //如:7月份点击变成6月份后 8月份才可以变成7月份)
   nextTick(()=>{

   let element_2 = document.querySelectorAll(".statistics__date-picker .el-date-range-picker .el-date-range-picker__header .arrow-left");

   if (element_2 && element_2.length && element_2[1]) element_2[1].click();

   )}
}

结果如图所示:

 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值