PC模糊搜索

双向绑定input输入框,监听值改变事件

html 复制代码
 <el-input
     @input="input"
      v-model="queryParams.keyword"
      style="margin-bottom: 10px"
      type="text"
      prefix-icon="el-icon-search"
      size="small"
      placeholder="输入员工姓名全员搜索"
    />
javascript 复制代码
 queryParams: {
        keyword: "", //模糊搜素关键字
     },
   methods:{
     //模糊搜索
    input() {
      // 单位时间内只执行最后一次
      // this的实例上赋值了一个timer的属性
      //防抖
      clearTimeout(this.timer); // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.queryParams.page = 1;
        this.employeeList(); //这里在发一次请求
      }, 500);
    },
 }

这里监听的事件是input,为什么不用change事件,注意change事件是离开焦点触发,input是只要内容发生变化就会触发,所以这里使用input更符合使用场景

相关推荐
恋猫de小郭5 分钟前
八年开源,GSY 用五种技术开发了同一个 Github 客户端,这次轮到 AI + Compose
android·前端·flutter
少年姜太公6 小时前
什么?还不知道git cherry pick?
前端·javascript·git
白兰地空瓶7 小时前
🏒 前端 AI 应用实战:用 Vue3 + Coze,把宠物一键变成冰球运动员!
前端·vue.js·coze
Liu.7749 小时前
vue3使用vue3-print-nb打印
前端·javascript·vue.js
松涛和鸣9 小时前
Linux Makefile : From Basic Syntax to Multi-File Project Compilation
linux·运维·服务器·前端·windows·哈希算法
dly_blog10 小时前
Vue 逻辑复用的多种方案对比!
前端·javascript·vue.js
万少10 小时前
HarmonyOS6 接入分享,原来也是三分钟的事情
前端·harmonyos
烛阴10 小时前
C# 正则表达式:量词与锚点——从“.*”到精确匹配
前端·正则表达式·c#
wyzqhhhh10 小时前
京东啊啊啊啊啊
开发语言·前端·javascript
JIngJaneIL10 小时前
基于java+ vue助农电商系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端