1. 程式人生 > 實用技巧 >vue + element ui --- el-input 輸入框模糊搜尋節流

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"
        @change="handleInput"
        placeholder
="請輸入物料編碼/物料描述/品牌/規格/型號"> </el-input>

如果用watch 監聽的方式,把@change="handleInput" 去掉即可。