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();
  }
}
相关推荐
小光学长1 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH1 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据2 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年3 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una4 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年4 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js4 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ5 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办5 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao5 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript