MENU
- 前言
- 解决
- html
- JavaScrip
前言
在一个任务列表的搜索栏,添加一个日期区间搜索。使用到element-plus中的日期选择器
el-date-picker
;el-date-picker
本身方法中有change事件,但是清空按钮没有对应回调方法。在任务列表的搜索需求中,当日期区间清除后要重新请求任务列表的全部内容。
解决
虽然
el-date-picker
没有清除按钮的回调,但是内容发生变化时会触发change事件。可以在change事件的回调方法中判断,当el-date-picker
中v-model双向绑定的数组为空时,则是点击了清除按钮。
html
<el-date-pickerclass="w_230_i"v-model="queryParams.dateRange"value-format="YYYY-MM-DD"format="YYYY-MM-DD"type="daterange"range-separator="~"start-placeholder="开始日期"end-placeholder="结束日期":editable="false"clearable@change="handleInputClear"
></el-date-picker>
JavaScrip
/*** 搜索输入框清空* @param {String} val 输入的值*/
function handleInputClear(val) {if (!val) {queryParams.value.pageNum = 1;handleList();}
}