如果有同学还没用过这个功能,可以先了解下:
使用场景
大部分情况下使用 el-select
的时候,el-options
中 options 的值都是后端接口给的数据,直接赋值就可以了。但是有的时候数据量比较大,比如几千甚至上万条的时候,如果直接赋值,整个页面的 dom 会被撑爆,不仅请求全量数据接口的时候时间会很久,而且赋值完之后整个页面会非常卡。
解决方法
现在的 elementPlus
已经有虚拟化选择器了,直接使用,非常方便,如果你使用的是Vue3,可以直接移步 elementPlus官方文档
如果你使用的是 Vue2,很可惜没有现成的组件能够使用。解决方法一共两个,都是需要后端配合前端进行修改的:
- 后端将接口改为分页的形式;前端将选择器下拉框中的数据改为滚动加载
- 后端将接口改为模糊搜索的形式,通过选择器中输入的内容去搜索模糊匹配的数据然后返回;前端使用
elementUI
中选择器的