節流方式有兩種:
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)"即可