如果数据量不是特别大,可以优先考虑分页加载;如果数据量极大且需要频繁更新,可能需要考虑使用虚拟滚动或自定义组件。 5. 测试优化后的el-select性能 在实施优化方案后,需要对 el-select 的性能进行测试,以确保卡顿问题得到解决。可以使用浏览器的性能分析工具(如Chrome的DevTools中的Performance面板)来监测渲染时间、内存...
问题出在测试环境时,el-select的可选数据 leaderOptions的量级顶多100多人,而到了正式生产环境中,leaderOptions达到了将近两万左右,从而造成了组件卡顿。 因此,解决问题的方式就是,如何降低el-select的可选项 leaderOptions的数量。 两种解决思路 我们认为有两种解决思路: 前后端配合 这种方式的优点是,思路清晰简单,修...
思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离底部的距离 > 可滑动高度)把数组变大就行了 1、我这里用的是局部注册 directives: { loadmore: { inserted(el, binding) { const dom=el.querySelector(".el-select-dropdown .el-select-dropdown...
总结来说，通过合理调整数据返回策略和前端优化，可以有效解决el-select组件在处理大量数据时的卡顿问题。在实际应用中，灵活运用这些方法，结合团队协作与沟通，可以有效提升系统的整体性能和用户体验。
当我们使用el-select选择器下拉数据很大的时候,会出现页面卡顿,甚至卡死的情况,用户体验很不好。我目前采取的方案是使用虚拟列表的方式去处理这个问题。 实现效果 数据获取完毕: 点击输入框:我们可以看到 2 万条数据只展示了 30 条。 我们滚动找到 kaimo-666,选择它 ...
每个el-select里的option数量其实并不多,大概10个左右。 但是当用户插入10条数据的时候,也就是页面里el-table里有将近300个el-select组件的时候,很明显的卡顿就出现。 将近3-4秒,如果操作过于频繁甚至会更久。 如果用源生的select跟option标签替换所有el-select去除冗余dom后的确效率会快很多,但是也缺失了很多el-...
参考地址:el-select的数据太多时候导致卡顿 修改时,展示已选中的选项(已使用上面的解决方法的情况下) // 解决方案是:在展示前,循环总数据把选中的放在paperList的最前面let paperArr=[1,2,3];this.record={paperArr:paperArr};for(constitem ofthis.examPaperSelStore.list){if(paperArr.indexOf(item.id)!
el-table嵌套el-select和el-input,循环出几百条或几千条数据时,下拉框选中回显卡顿和输入卡顿的问题el-input已找到了解决思路,如下:用原生input替换el-input,以减少el-input组件实例。并在原生input上应用el-input的样式,使前者后者外观一致。在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发...
2. 2、解决大量Demo渲染导致页面卡顿 使用方法:虚拟加载 思路:因为数据量一次过来了2000+ ,渲染demo 需要浪费很大的时间;首先想到是在视图范围内:先渲染10条数据,当用户使用滚轮/ 滚动条滑动的时候,当数据到达视图范围内再渲染 1659519895831.png 2.3、使用虚拟滚动后页面渲染 ...
[Enhancement] [tree-select] el-tree-select 在数据量过大时候页面卡顿(The page freezes when the data volume is too large in el-tree-select.)