针对您提出的 el-select 数据过大导致的卡顿问题,我们可以从以下几个方面进行分析和优化: 1. 分析el-select组件数据过大的原因 数据量过大:当 el-select 的选项(el-option)数量非常多时,DOM的渲染和浏览器的重绘/回流会变得非常耗时,从而导致卡顿。 数据绑定方式:如果 el-select 的数据是直接通过 v-for 绑定...
el-select实现触底加载 当我们使用el-select下拉框的时候,会遇到后端放回的数据太过庞大(成千上万条),导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗,避免页面卡顿。 思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离底部...
开始以为是el-tabs造成页面卡顿,后来怀疑可能是v-for多层动态渲染的原因,最后定位到问题是页面中的有多个el-select,而每个el-select的el-option中数据量太大,导致拖慢了整个页面渲染。 最后通过从设计上去避免这个问题来解决,减少el-option中的数据量。
但是如果有个一个table有40来个columns, 然后根据要求一行就要渲染将近30个el-select组件,并且允许用户插入新添加的数据。 每个el-select里的option数量其实并不多,大概10个左右。 但是当用户插入10条数据的时候,也就是页面里el-table里有将近300个el-select组件的时候,很明显的卡顿就出现。 将近3-4秒,如果操作过...
在使用element-ui展示表格数据时,需要根据查询条件对数据进行搜索,此时需使用el-select,并且需要从服务端获取数据用el-option展示给用户选择,但是由于搜索条件使用的是业务的数据,所以数据量比较大,服务端返回的数据量达到了5000多条,还需要在下拉框中展示。
参考地址:el-select的数据太多时候导致卡顿 修改时,展示已选中的选项(已使用上面的解决方法的情况下) // 解决方案是:在展示前,循环总数据把选中的放在paperList的最前面let paperArr=[1,2,3];this.record={paperArr:paperArr};for(constitem ofthis.examPaperSelStore.list){if(paperArr.indexOf(item.id)!
造成页面卡顿的原因就是由于 el-select 里的 options dom 元素过多导致的。所以问题点就在于怎样能保证点击选择的时候,options 里的 dom 元素不是全部,而是一部分。主要是渲染导致页面卡顿 回复2018-10-24 Esonwei: 请问楼主解决了? 回复2018-12-07 共4 条评论 查看全部 1 个回答...
在使用el-select组件时,当数据量过大,往往会遇到渲染延迟、滚动卡顿以及内存占用高等问题。这些问题不仅影响用户体验,还可能拖慢整个系统的性能。为此,本文提供了三种有效的解决方法。 一、引入虚拟滚动技术 虚拟滚动是一种优化长列表渲染的技术,它只渲染可视区域内的元素,其他元素则通过占位符替代,从而大大减少DOM的渲...
</el-select> 问题出在测试环境时,el-select的可选数据 leaderOptions的量级顶多100多人,而到了正式生产环境中,leaderOptions达到了将近两万左右,从而造成了组件卡顿。 因此,解决问题的方式就是,如何降低el-select的可选项 leaderOptions的数量。 两种解决思路 ...