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)"即可