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更符合使用场景

相关推荐
Jinuss2 分钟前
源码分析之React中的Fiber节点介绍
前端·javascript·react.js
SJLoveIT2 分钟前
xss攻击复习总结
前端·xss
放逐者-保持本心,方可放逐3 分钟前
react 之 useState 和 useEffect 应用
前端·javascript·react.js·usestate·useeffect
集成显卡10 小时前
Bun v1.3.6 发布:内置 Tarball 归档支持、JSONC 解析、Bundle 分析增强等重磅更新!
javascript·新版本·bun.js
奔跑的web.10 小时前
TypeScript Enum 类型入门:从基础到实战
前端·javascript·typescript
盐真卿10 小时前
python2
java·前端·javascript
梦梦代码精10 小时前
BuildingAI vs Dify vs 扣子:三大开源智能体平台架构风格对比
开发语言·前端·数据库·后端·架构·开源·推荐算法
seabirdssss11 小时前
《bootstrap is not defined 导致“获取配置详情失败”?一次前端踩坑实录》
前端·bootstrap·html
kgduu11 小时前
js之表单
开发语言·前端·javascript
摘星编程12 小时前
React Native for OpenHarmony 实战:Picker 选择器组件详解
javascript·react native·react.js