解决：el-select下拉数据过多，造成页面卡顿问题

解决原理：默认设置el-select下拉数据只显示部分数据（使用数组的slice()方法），当用户输入搜索时，使用 filter-method 属性自定义搜索方法，也限制最多只返回部分数据。

<el-select v-model="checkedGoodsBrandList" value-key="brand_id" filterable clearable     multiple reserve-keyword :filter-method="filterGoodsBrand" collapse-tags placeholder="请选择或输入查询">
  <el-option
    v-for="item in filterGoodsBrandList"
    :key="item.brand_id"
    :label="item.brand_name"
    :value="item">
  </el-option>
  <el-option v-if="filterGoodsBrandList.length === 30 && goodsBrandList.length > 30" value="tip" disabled>
    <span class="gray">--只展示前30条数据，更多数据请输入查询--</span>
  </el-option>
</el-select>

<script lang="ts">
... // 省略code
created() {
  this.getDropdownList()
}

private getDropdownList() {
   // 异步请求下拉数据, list是后台返回的几千的下拉数据
   ...
   this.goodsBrandList = list // 保存所有下拉数据
   this.filterGoodsBrandList = list.slice(0, 30) // 只显示前30条
}

// 自定义el-select的搜索实现方法
private filterGoodsBrand(query: string) {
    const list = this.goodsBrandList.filter(item => {
      return item.brand_name && item.brand_name.includes(query)
    })
    // 根据检索条件筛选出来的选项，只取前30条
    if (list.length > 30) {
      this.filterGoodsBrandList = list.slice(0, 30)
    } else {
      this.filterGoodsBrandList = list
    }
 }
</script>

el-select组件的其他用法扩展：

1. 常用配置：

1.  如果组件value绑定的是对象，需声明value-key属性为对象的某个唯一标志字段。如：value-key="user_id"

2. 实现输入联想：添加remote属性和remote-method自定义远程搜索方法实现。

<el-select
  v-model="listQuery.goods_id"
  filterable
  clearable
  placeholder="请输入商品名称关键词"
  remote
  :remote-method="(query) => searchGoodsList(query)"
  :loading="searchGoodsLoading"
  >
  <el-option
  v-for="item in goodsList"
  :key="item.goods_id"
  :label="item.goods_name"
  :value="item.goods_id"
  >
  </el-option>
</el-select>

<script lang="ts">
import { getGoodsListByKeywords } from '@/api/common'

private goodsList = []
private searchGoodsLoading = false // 下拉的loading

... // 省略code

// 根据搜索词获取下拉数据
private searchGoodsList(query: string) {
  if (query) {
      this.searchGoodsLoading = true
      // limit参数：是限制后台最多返回的个数
      const params = { goods_name: query, limit: (this as any).$C.MAX_RETURN_USER_LIMIT }
      getGoodsListByKeywords(params).then(res => {
        this.goodsList = res.data || []
      }).finally(() => {
        this.searchGoodsLoading = false
      })
    } else {
      this.goodsList = []
  }
}

</script>