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

相关推荐
爱隐身的官人19 分钟前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML1 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
烛阴3 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者4 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
wayhome在哪4 小时前
Cropper.js 轻松拿捏前端裁剪🤞
javascript·canvas·设计
&白帝&4 小时前
vue2和vue3的对比
javascript·vue.js·ecmascript
江东大都督周总4 小时前
rabbitmq集群
javascript·rabbitmq·ruby
vivi_and_qiao4 小时前
HTML的form表单
java·前端·html
一嘴一个橘子4 小时前
uniapp 顶部tab + 占满剩余高度的内容区域swiper
javascript·uni-app
wayhome在哪5 小时前
30KB 轻量王者!SortableJS 轻松搞定拖拽需求
javascript·设计·dom