前言

在一個任務(wù)列表的搜索欄，添加一個日期區(qū)間搜索。使用到element-plus中的日期選擇器el-date-picker；el-date-picker本身方法中有change事件，但是清空按鈕沒有對應(yīng)回調(diào)方法。在任務(wù)列表的搜索需求中，當(dāng)日期區(qū)間清除后要重新請求任務(wù)列表的全部內(nèi)容。

解決

雖然el-date-picker沒有清除按鈕的回調(diào)，但是內(nèi)容發(fā)生變化時會觸發(fā)change事件?？梢栽赾hange事件的回調(diào)方法中判斷，當(dāng)el-date-picker中v-model雙向綁定的數(shù)組為空時，則是點擊了清除按鈕。

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="結(jié)束日期":editable="false"clearable@change="handleInputClear"
></el-date-picker>

JavaScrip

/*** 搜索輸入框清空* @param {String} val 輸入的值*/
function handleInputClear(val) {if (!val) {queryParams.value.pageNum = 1;handleList();}
}