最近项目要求点击底部”清空“按钮不关闭日期框,element-ui是默认点击关闭日期选择框的。
实现做法是监听datepicker的times事件,当点击清空的时候times值为null,然后再外面关上日期框。具体代码如下:
<el-date-picker
v-show="historyShow"
ref="datePicker"
v-model="times"
style="margin-top:5px;"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
@change="handleHistoryTime"
/>
//js部分
watch: {
times(val) {
if (!val) {
this.$refs.datePicker.showPicker();
this.times = [];
return;
}
}
}