vue + element ui --- el-input 输入框模糊搜索节流

节流方式有两种：

1。通过watch监听输入框的value值，设置定时器，隔1.5秒去请求一次查询接口。

代码如下：

watch:{
        // 输入框节流
        'ruleData.searchInp':{
            handler(val){
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                this.timer = setTimeout(() => {
                    if(val !== ''){
                        this.getSearchData();
                    }
                }, 1500)
            },
            deep: true
        }
    },

2. 通过输入框的change事件触发，获取value 值 每隔1.5秒请求一次接口。

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

html:  

 <el-input 
        v-model="ruleData.pernr" 
        style="width:50%"
        class="mr-10"
        @input="handleInput"
        placeholder="请输入物料编码/物料描述/品牌/规格/型号">
</el-input>

如果用watch 监听的方式，把@input="handleInput" 去掉即可。如果是点击回车键触发把事件换成@keyup.enter.native="handleInput(ruleData.pernr)"即可