解决模糊查询问题 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{

brandNameList(){
  let _this =this;
  let arr =[];
  let getBrand = ‘‘
  // 下拉框
  getBrandNameByName(getBrand).then((result)=>{
    result.result.map(function(item){
　　　　　　　　
       _this.statesArr.push(item.brandName);//将接口返回的数据变成自己想要的格式，然后存储在变量statesArr中
    });
  }).catch((err) => {
    console.log(‘err :‘, err)
  });
},

remoteMethod(query) {
  let _this =this;
  if (query !== ‘‘) {
    _this.loading = true;
    setTimeout(() => {
      _this.loading = false;
      _this.brandNameArr = _this.statesArr.filter(item => {
        return  item.indexOf(query) > -1;//判断如果statesArr中有搜索的字段那么就赋值给brandNameArr（就是下拉框的数据）
      });
    }, 200);
  } else {
    _this.brandNameArr = [];
  }
},
}

解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找

原文：https://www.cnblogs.com/whdaichengxu/p/12143590.html