vue3+element-plus之el-date-picker日期选择器清空无回调的解决方案


前言

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


解决

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


html

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"
></el-date-picker>

JavaScrip

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

    handleList();
  }
}
相关推荐
daols886 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴9 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust9 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放9 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝10 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele11 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试