关于element-ui下拉框数据过多，导致页面卡顿。前端分页实现

前情提要：

最近使用element-ui开发的一个页面，在打开的时候占用cpu非常高，有时候都能达到90%↑。在调试时发现其中一个下拉框的接口返回2k↑的数据。本着有问题问百度的精神，看到主要的解决方案有如下两种：

1. 监听下拉框滚动事件，去服务端请求数据 https://blog.csdn.net/zhangshineng/article/details/89676413?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

2. 渲染一部分数据，其余部分需要手动筛选 https://www.cnblogs.com/mianbaodaxia/p/11153341.html

方案1：分页获取数据，根据select触发事件去接口获取下一页。方案2：渲染一部分数据，其余数据需手动输入筛选。两种方案的核心都是将数据获取与渲染dom分开（渲染时性能消耗较大），我的数据最多有2K条左右，让后端加一个接口感觉不太合适，参考以上两种方案，本地进行优化
1.前端获所有数据实现本地分页
2.可输入文字筛选待选项

代码 https://github.com/dadademo/demo/blob/main/src/components/select.vue

注：参考链接只是在百度搜索到的，有的未找到原文链接，如有问题私信我修改或删除