解决ElementUI下拉框选项过多造成页面卡顿的问题
问题描述:
-
请求接口拿到型号列表
-
可以看见
goodsCodeList
是一个拥有近两千个元素的数组 -
如果直接使用
el-option
遍历这个数组的话,渲染时间会很长,并且整个页面无响应
解决思路:
- 为
el-select
添加filterable
属性启用搜索功能 - 使用
el-select
的filter-method
进行自定义搜索逻辑 filter-method
为一个Function
,它会在输入值发生变化时调用,参数为当前输入值
解决方法
-
自定义搜索逻辑
filterMethod
-
新建一个
goodsCodeLists
数组存放经过筛选的结果,用于el-option
遍历 -
通过截取输入结果的前30个元素,遍历时即可大大降低渲染时间
-
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个 } },
-
完事~