针对您提出的 el-select 数据过大导致的卡顿问题,我们可以从以下几个方面进行分析和优化: 1. 分析el-select组件数据过大的原因 数据量过大:当 el-select 的选项(el-option)数量非常多时,DOM的渲染和浏览器的重绘/回流会变得非常耗时,从而导致卡顿。 数据绑定方式:如果 el-select 的数据是直接通过 v-for 绑定...
</el-select> 问题出在测试环境时,el-select的可选数据 leaderOptions的量级顶多100多人,而到了正式生产环境中,leaderOptions达到了将近两万左右,从而造成了组件卡顿。 因此,解决问题的方式就是,如何降低el-select的可选项 leaderOptions的数量。 两种解决思路 我们认为有两种解决思路: 前后端配合 这种方式的优点是,...
在el-select组件上添加filterable和remote属性。 使用@search事件监听用户的搜索行为。 在事件处理函数中,发送请求到后端,并根据返回的数据更新el-select的选项。 这种方式可以极大地减少前端需要渲染的数据量,因为用户每次搜索时,前端只会渲染与搜索关键字匹配的数据。 三、优化组件内部逻辑 除了上述两种技术性的解决方法...
当我们使用el-select下拉框的时候,会遇到后端放回的数据太过庞大(成千上万条),导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗,避免页面卡顿。 思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离底部的距离 > 可滑动高度)...
在日常开发过程中,我们使用 Vue+Element UI 开发项目,经常会使用el-select组件进行数据的单选/多选、回显等操作。一般情况下使用el-select组件可以满足绝大部分应用场景,不会遇到特殊问题,但是如果数据源足够多,要在一大批的数据中进行筛选,则会出现组件加载数据太慢、页面卡顿等问题。
【Vue】el-select 数据过多替代方案 一、需求问题: 一开始就考虑使用简单el-select选取数据,但是后面数据量增多, 超过一千条开始,组件会很卡不好用,第二个是接口也慢了 数据量多的话是有一个filterable做支持了,可以输入关键字进行匹配检索 但是不能解决卡顿的问题,接口还是比较慢...
问题的来源通常涉及数据量的剧增。以一个后台管理系统为例，该系统利用Element-UI的el-select组件允许用户从当前操作人有权控制的众多人员中选择一位作为领导。在测试环境下，这一操作运行顺畅，然而一旦部署至正式环境，可选项数量激增至近两万，导致组件性能下降，出现卡顿。为解决这一问题，我们分析了两种...
我基于 vue-virtual-scroll-list 跟 element-ui 实现了下拉虚拟列表,解决下拉选择框数据量大时卡顿问题。 代码地址:https://github.com/kaimo313/select-virtual-list 什么是虚拟列表 虚拟列表是按需显示的一种技术,可以根据用户的滚动,不必渲染所有列表项,而只是...
element-ui中el-select下拉框选项过多 el-select中options数据超过3000条就会造成前端页面明显卡顿,本次我的遇到的业务场景数据是近2w条,因此在不优化的情况下页面压根无法使用,下面给出我的优化过程。 一种优化思路 element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一...