前言

一个任务列表搜索栏,添加一个日期区间搜索。使用elementplus中的日期选择器el-date-pickerel-date-picker本身方法中有change事件,但是清空按钮没有对应回调方法。在任务列表的搜索需求中,当日期区间清除后要重新请求任务列表的全部内容


解决

虽然el-date-picker没有清除按钮回调,但是内容发生变化时会触发change事件可以change事件回调方法判断,当el-date-pickervmodel双向绑定数组为空时,则是点击清除按钮。


html

<el-date-picker
  class="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"
&gt;</el-date-picker&gt;

JavaScrip

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

    handleList();
  }
}

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注