完美解决下拉框(el-select)数据过多,导致页面卡顿

7,075 阅读1分钟

场景:

下拉框选项数据达到几千甚至几万条的时候,这个时候下拉的数据过多,导致页面渲染复杂化,使得页面卡顿或者卡死问题。

解决方案分析:

既然是数据过多导致渲染卡顿,那么我们出发点自然是减少需要渲染的数据。首先,我们可以在拿到数据的时候进行数据的切割,或者懒加载,默认情况下,下拉只展示20条数据,随着用户下拉的滑动,逐渐增加条数。这里我们自定义一个下拉的懒加载。其次利用element-ui的select有一个fildter-method方法,我们可以通过这个方法来再次进行过滤下拉项数据,至此完美的解决的下拉框数据过多造成卡顿的问题。

完整代码如下:

下拉选代码

自定义增加一个滚动加载

滚动增加数据

项目要求,当输入不同的内容,还要进行查询数据,elemnt-ui的el-select也可以通过fildter-method来对数据行进过滤,但是考虑到性能问题,还是按照重新请求数据处理。

下拉确定后还需要查询数据赋值表单方法

至此,卡顿完美解决。