场景:
下拉框选项数据达到几千甚至几万条的时候,这个时候下拉的数据过多,导致页面渲染复杂化,使得页面卡顿或者卡死问题。
解决方案分析:
既然是数据过多导致渲染卡顿,那么我们出发点自然是减少需要渲染的数据。首先,我们可以在拿到数据的时候进行数据的切割,或者懒加载,默认情况下,下拉只展示20条数据,随着用户下拉的滑动,逐渐增加条数。这里我们自定义一个下拉的懒加载。其次利用element-ui的select有一个fildter-method方法,我们可以通过这个方法来再次进行过滤下拉项数据,至此完美的解决的下拉框数据过多造成卡顿的问题。
完整代码如下:
下拉选代码
自定义增加一个滚动加载
滚动增加数据
项目要求,当输入不同的内容,还要进行查询数据,elemnt-ui的el-select也可以通过fildter-method来对数据行进过滤,但是考虑到性能问题,还是按照重新请求数据处理。
下拉确定后还需要查询数据赋值表单方法
至此,卡顿完美解决。