前言

el-select数据过多这个问题应该很多人都遇到过，在生产环境中数据几百、几千条是比较常见的。当数据过多时，就会造成浏览器卡顿，如果客户电脑性能不行，浏览器直接卡死也有可能。

解决

先说一下现在项目中遇到的两种解决方案：

原解决方案

添加分页条

这种方案好像有点问题，具体什么问题忘记了，感兴趣的可以看一下：element ui 下拉框分页（下拉框数据过多）

滚动懒加载

这种方式是我的一个同事写的，代码就不放了。原理就是一开始加载20条数据，当列表滚动到底部的时候，加载下一个20条数据。

先解决方案

最近在思考，卡顿的根本原因就是数据太多了。那么我能否一下子把所有数据都请求过来，但是我每次就显示20条数据，当我向下滚动时我就渲染下一个20条数据。

当然有一些问题是需要解决的：

• 数据回显的问题。当下拉绑定的值在下拉项里匹配不到时就是显示绑定的值，而不是对应的名称。目前考虑：这20条数据里如果有这个值则不处理；没有这个值，则往数组里添加上。这样会有20条数据和21条数据两种情况
• 模糊搜索的话，也是每次显示20条数据
• 数据切换的话打算通过鼠标滑轮事件来实现

  示例

  肯定会有些问题，但是作为一个demo就懒得处理了，纯粹是提供一种思路