vue + element ui --- el-input 輸入框模糊搜尋節流
阿新 • • 發佈:2021-01-20
節流方式有兩種:
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" @change="handleInput" placeholder="請輸入物料編碼/物料描述/品牌/規格/型號"> </el-input>
如果用watch 監聽的方式,把@change="handleInput" 去掉即可。