element-ui 日期时间选择器点击左侧快捷切换不关闭pannel怎么做?

版本

element-ui 版本 ^2.13.2

问题描述

需求如下:想点击这个快捷切换不关闭时间选择pannel


image.png

查询官网只看到有个日期的参数


image.png

但是看了下element-ui 源码发现实际上还有另外一个参数,这个参数就是控制pannel是否显示的
image.png

因此加个参数true就行了,如下

        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end], true); // 第三个参数传个true就可以不关闭pannel了
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end], true); // 第三个参数传个true就可以不关闭pannel了
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end], true); // 第三个参数传个true就可以不关闭pannel了
            }
          }]
        },

顺带说一句

如果想要取消范围组件两个日期面板的联动,用这个属性 unlink-panels

image.png

image.png

若对你有帮助,请点个赞吧,若能打赏不胜感激,谢谢支持!
本文地址:https://www.jianshu.com/p/546e5c3cb238?v=1718335422219,转载请注明出处,谢谢。

参考:
https://github.com/ElemeFE/element/blob/dev/packages/date-picker/src/picker.vue
https://element.eleme.cn/#/zh-CN/component/datetime-picker

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容