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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐