解決模糊查詢問題 element UI 從服務器搜索數據，輸入關鍵字進行查找

做項目是遇見下拉框的形式，后台返回來3萬多條，用element UI中的select選擇器中的搜索還是會造成頁面卡頓和系統崩潰，因此用了它的遠程搜索功能，發現還不錯，解決了這個問題。

 

 

 代碼1

<el-select v-model="brandNameValue"
           multiple
           collapse-tags
           placeholder="全部"
           class="selectBrand"
           :filterable = true
            remote
           reserve-keyword
           :remote-method="remoteMethod"
           :loading="loading"
           @change="handleChangeBrand"
>
  <el-option
    v-for="(item,index) in brandNameArr"
    :key="index"
    :label="item"
    :value="item"
    @change="handleChangeBrand"
  >
  </el-option>
</el-select>

 

 

mounted(){
  let _this = this;

  _this.brandNameList();
},

 

 

//數據初始化

data(){
  return{
    // 品牌數據
    brandNameArr:[],
    brandNameValue:[],
    list: [],
    loading: false,
    statesArr:[],
　　}
}

一下為所用函數

methods{

remoteMethod(query) {
  let _this =this;
  if (query !== '') {
    _this.loading = true;
    // 下拉框走的接口==這個接口根據自己的來哦
    getBrandNameByName(query).then((result)=>{
　　　　　　　　//主要在這里
      result.result.map(function(item){
        _this.statesArr.push(item.brandName);//item.brandName是我要取的數也就是我查找回來的數據，然后把它放到statesArr中
      });
　　　　//brandNameArr是下拉框中那個for循環數據
      _this.brandNameArr = _this.statesArr.filter(item => {
        return  item.indexOf(query) > -1;
      });
      if(result.code == 20000){//判斷看看數據是否返回成功，成功了就給個定時器然后關閉加載效果
        setTimeout(() => {
          _this.loading = false;
        }, 200);
      }
    }).catch((err) => {
      console.log('err :', err)
    });
  } else {
    _this.brandNameArr = [];
  }
},

}