【VUE】elementUI：el-input，判断用户输入完后查询

最新推荐文章于 2024-05-12 10:46:47 发布

小魏的马仔

最新推荐文章于 2024-05-12 10:46:47 发布

阅读量295

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/xuexiiphone/article/details/137536714

版权

文章讲述了在Vue应用中，如何使用v-model绑定值并在用户输入后实现1.5秒后执行getSearchData函数，同时当有输入时清空旧定时器并重新计时的逻辑。

摘要由CSDN通过智能技术生成

 <el-input 
        v-model="data" 
        style="width:50%"
        class="mr-10"
        @input="handleInput"
        placeholder="模糊查询，输入完成后1.5s启动">
</el-input>

逻辑：判断是否有输入，如果有输入，则清空并重启定时器，从头开始1.5s计时。

 handleInput(val){
            if (this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                if(val !== ''){
                    this.getSearchData();
                }
            }, 1500)
        }