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();
  }
}
相关推荐
coding随想25 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB242 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子10 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录10 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode11 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript