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);
                })

            },