如果数据量不是特别大,可以优先考虑分页加载;如果数据量极大且需要频繁更新,可能需要考虑使用虚拟滚动或自定义组件。 5. 测试优化后的el-select性能 在实施优化方案后,需要对 el-select 的性能进行测试,以确保卡顿问题得到解决。可以使用浏览器的性能分析工具(如Chrome的DevTools中的Performance面板)来监测渲染时间、内存...
我们设置el-select的 filter-method: <el-select v-model="orgForm.leader" placeholder="请选择部门领导" style="width: 15vw" clearable multiple filterable :filter-method="filterCheckPerOptions" > <el-option v-for="(l, index) in leaderOptionsTop30" :key="index" :label="l.realname" :value=...
当我们使用el-select下拉框的时候,会遇到后端放回的数据太过庞大(成千上万条),导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗,避免页面卡顿。 思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离底部的距离 > 可滑动高度)...
我们再次点击输入框,我们以及定位到了 kaimo-666 这个位置 另外拓展了点击项目跟输入框数据改变的事件 源码导致 我基于 vue-virtual-scroll-list 跟 element-ui 实现了下拉虚拟列表,解决下拉选择框数据量大时卡顿问题。 代码地址:https://github.com/kaimo313/select-virt...
除了数据量外，其他因素如网络延迟、数据库性能等也可能导致用户体验的下降。总结来说，通过合理调整数据返回策略和前端优化，可以有效解决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-...
el-table嵌套el-select和el-input,循环出几百条或几千条数据时,下拉框选中回显卡顿和输入卡顿的问题el-input已找到了解决思路,如下:用原生input替换el-input,以减少el-input组件实例。并在原生input上应用el-input的样式,使前者后者外观一致。在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发...
⽤⼈会说element-ui的select有⼀个remote-method，⽀持远程搜索，我们让服务端⽀持⼀下不就可以了，当然这是⼀种解决的⽅案。但是有时候这种⽅法有时候不⼀定适⽤ （1）有时候服务端数据是经过计算返回给我们的，可能返回不是特别快，体验不是很好 （2）有时候数据可能只有⼏千条，全部渲染...