应用场景: 当前日期的查询所有数据皆为过往数据(历史数据), 时间在当下往前
默认: 当前月份展示在左边.在这里插入图片描述
实现: 点击选择时自动点击下个月按钮

 <!-- html -->
<span @click="changeInitCalendarRange">          
      <el-date-picker v-model="dateRange" type="datetimerange" range-separator="" start-placeholder="开始日期" end-placeholder="结束日期" @change="onsetmonitor" :default-time="['00:00:00', '23:59:59']" :clearable="false">               
      </el-date-picker>           
</span>
// js
// 定义countss
data() {       
 return { 
   dateRange:[],
   countss: 0,
 }
},
methods: {
  changeInitCalendarRange() {
    if (this.countss > 0) return;
    this.countss++;
    let element = document.querySelector("button.el-picker-panel__icon-btn.el-icon-arrow-left");
    if (element) element.click();  // 点击一次下个月
  },
  //如果选定值,重置countss
  onsetmonitor() {
    if (this.dateRange) return;
    this.countss = 0;   // 当日期数据为[]时重置
  }
}

在这里插入图片描述
另外, ElementPlus也适用, 但是要修改一下获取元素的类名: .arrow-left

let element = document.querySelector("button.el-picker-panel__icon-btn.arrow-left");

结束.

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐