数据量过大:当 el-select 的选项(el-option)数量非常多时,DOM的渲染和浏览器的重绘/回流会变得非常耗时,从而导致卡顿。 数据绑定方式:如果 el-select 的数据是直接通过 v-for 绑定在一个大数组上,那么在每次数据更新时,Vue都会重新计算并渲染整个列表,这也会增加卡顿的风险。 2. 研究el-select在处理大数据时的...
问题出在测试环境时,el-select的可选数据 leaderOptions的量级顶多100多人,而到了正式生产环境中,leaderOptions达到了将近两万左右,从而造成了组件卡顿。 因此,解决问题的方式就是,如何降低el-select的可选项 leaderOptions的数量。 两种解决思路 我们认为有两种解决思路: 前后端配合 这种方式的优点是,思路清晰简单,修...
el-select实现触底加载 当我们使用el-select下拉框的时候,会遇到后端放回的数据太过庞大(成千上万条),导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗,避免页面卡顿。 思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离底部...
我基于 vue-virtual-scroll-list 跟 element-ui 实现了下拉虚拟列表,解决下拉选择框数据量大时卡顿问题。 代码地址:https://github.com/kaimo313/select-virtual-list 什么是虚拟列表 虚拟列表是按需显示的一种技术,可以根据用户的滚动,不必渲染所有列表项,而只是...
问题的来源通常涉及数据量的剧增。以一个后台管理系统为例，该系统利用Element-UI的el-select组件允许用户从当前操作人有权控制的众多人员中选择一位作为领导。在测试环境下，这一操作运行顺畅，然而一旦部署至正式环境，可选项数量激增至近两万，导致组件性能下降，出现卡顿。为解决这一问题，我们分析了两种...
参考地址:el-select的数据太多时候导致卡顿 修改时,展示已选中的选项(已使用上面的解决方法的情况下) // 解决方案是:在展示前,循环总数据把选中的放在paperList的最前面let paperArr=[1,2,3];this.record={paperArr:paperArr};for(constitem ofthis.examPaperSelStore.list){if(paperArr.indexOf(item.id)!
每个el-select里的option数量其实并不多,大概10个左右。 但是当用户插入10条数据的时候,也就是页面里el-table里有将近300个el-select组件的时候,很明显的卡顿就出现。 将近3-4秒,如果操作过于频繁甚至会更久。 如果用源生的select跟option标签替换所有el-select去除冗余dom后的确效率会快很多,但是也缺失了很多el-...
在vue项目中,在页面动态渲染时,页面渲染非常慢,有时需要十多秒才能渲染完成。开始以为是el-tabs造成页面卡顿,后来怀疑可能是v-for多层动态渲染的原因,最后定位到问题是页面中的有多个el-select,而每个el-select的el-option中数据量太大,导致拖慢了整个页面渲染。最后
在使用el-select组件时,当数据量过大,往往会遇到渲染延迟、滚动卡顿以及内存占用高等问题。这些问题不仅影响用户体验,还可能拖慢整个系统的性能。为此,本文提供了三种有效的解决方法。 一、引入虚拟滚动技术 虚拟滚动是一种优化长列表渲染的技术,它只渲染可视区域内的元素,其他元素则通过占位符替代,从而大大减少DOM的渲...