版本
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
