element-ui帶輸入建議的input框踩坑


踩坑問題描述:

問題一:

獲取到后端返回的數組,並將數組傳入作為 results 傳入 callback 后,焦點放在 輸入框 上的時候,並未出現任何內容,只出現了一個不完整的空白框。


問題解決方案:
這個問題開始我以為是傳進 callback 的 data 格式不對。Element官網上是這么寫的:

我傳入的是對象數組,是沒問題的。
后來我仔細閱讀了 Elemen t帶建議查詢輸入框的 Demo 代碼並查閱相關資料發現,輸入建議列表的數據只來源於
data:[] 中的 value 字段!!!

於是,我將后端傳回的 response 處理了,將 response 中需要展示的字段組成 {value:'輸入建議'} 這種格式,問題解決。

 searchAppNodeApi(searchQuery).then(response => {
          this.loadAll = response.data
          this.devEuiArr = [];
          for (let item of this.loadAll) {
            this.devEuiArr.push({"value1": item.dev_eui})
          }
        })

searchAppNodeApi() 是我請求后端的api方法,拿到請求成功的回調函數的 response 參數。但是, response 里面包含很多我不需要的字段,我只需要其中的 dev_eui 字段。因此,循環 response.data 將其中每條的 dev_eui 重組成 {value:'輸入建議'} 的格式並 push 進聲明的新數組 devEuiArr。

打印如下:

 

 

正確效果如下:

 

 

 

 

問題二:

成功出現輸入建議列表后,出現一個新的問題,並且 Element 官網的 Demo 代碼並未闡述這種情況,就是當我獲取到輸入建議列表后,切換成另一個輸入建議列表,會先閃一下上一個出現的輸入建議列表,切換后的輸入列表為空也會閃出上個輸入建議列表,就算手動清空 callback(data:[]) 中的 data 數組也無濟於事。


問題解決方案:
這個問題開始我以為是需要返回數據后手動清空 callback 里面的 data 數組,像下面這樣:

 //聯想查詢時觸發
      querySearch(queryString, callback) {
        var results = queryString ? this.devEuiArr.filter(this.createFilter(queryString)) : this.devEuiArr
        // 調用 callback 返回建議列表的數據
        callback(results)
        results = ''
      }

但是一點作用沒起,也就是跟變量緩存沒什么關系,后來我在 Element 官網的一個小角落發現這么一個參數:

 

debounce ? 函數去抖 ? 應該就是它了!

debounce 的默認值是 300ms,我們將其設置為 0ms。

 <el-autocomplete
          placeholder="請輸入DEVEUI"
          v-model="searchDeveuiVal"
          clearable
          :fetch-suggestions="querySearch"
          size="small"
          :debounce=0
          @keyup.enter.native="searchAppNode">
 </el-autocomplete>

 

 

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM