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();
  }
}
相关推荐
ohMyGod_1232 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜052 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界2 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku2 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员2 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句2 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿2 小时前
Web第二次笔记
前端·javascript
Dream耀2 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer2 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
洋流2 小时前
0基础进大厂,第12天:ES6语法基础篇
javascript