遇到一个需求,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();

   )}
}

结果如图所示:

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐