解决ElementUI下拉框选项过多造成页面卡顿的问题

解决ElementUI下拉框选项过多造成页面卡顿的问题

问题描述：

1. 请求接口拿到型号列表

2. 可以看见goodsCodeList是一个拥有近两千个元素的数组

3. 如果直接使用el-option遍历这个数组的话，渲染时间会很长，并且整个页面无响应

解决思路：

1. 为el-select添加filterable属性启用搜索功能
2. 使用el-select的filter-method进行自定义搜索逻辑
3. filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值

解决方法

1. 自定义搜索逻辑filterMethod

2. 新建一个goodsCodeLists数组存放经过筛选的结果，用于el-option遍历

3. 通过截取输入结果的前30个元素，遍历时即可大大降低渲染时间

4. filterMethod(query) {
         //query是输入的关键字
         if (query == "") this.goodsCodeLists = this.goodsCodeList.slice(0, 30);
         else {
           let result = []; //存储符合条件的下拉选项
           this.goodsCodeList.forEach((val) => {
             if (val.indexOf(query) != -1) result.push(val);
           });
           this.goodsCodeLists = result.slice(0, 30); //只取前30个
         }
       },
   

5. 完事～