ElementUI 輸入框模糊搜索數據處理的坑

前言：

　　最近在遇到一個需求，輸入框（input）模糊搜索的功能，我用到的是ElementUI的<el-autocomplete></el-autocomplete>組件，但是在使用的過程中遇到了一些坑，分享一下

坑1：

　　根據官方提供的方法

querySearch(queryString, cb) {
     let params = {
         um: queryString
       }
     customerOrderApi.getUmList(params).then(res => {
         var restaurants = res;
         var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
              // 調用 callback 返回建議列表的數據
              cb(results);
            })
         },
createFilter(queryString) {
     let restaurant = this.restaurants;
         return (restaurant) => {
             return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
           };
       },

　　但是數據死活加載不出來一直是這個狀態

 

 最后我發現后台返回給我的數據類型是

　　["火雞面","粗面"]

但是官方給的數據類型是

　　[{value: "火雞面"},{value: "粗面"}]

解決：

　　所以最后通過改變數據類型解決

　　

 querySearch(queryString, cb) {
                let params = {
                    um: queryString
                }
                customerOrderApi.getUmList(params).then(res => {
　　　　　　　　　　　　/** @關鍵代碼
                    let obj = new Object();
                    let arr = [];
                    res.forEach((item, index) => {
                        obj.value = item
                        arr.push(obj)
                    })
　　　　　　　　　　　　*/
                    var restaurants = arr;
                    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                    // 調用 callback 返回建議列表的數據
                    cb(results);
                })

            },