一、分析卡顿原因 el-table在加载大量数据时卡顿,主要原因可能包括: DOM渲染压力大:当数据量很大时,el-table会创建大量的DOM节点,浏览器的渲染引擎需要花费较多的时间和资源来处理这些节点。 数据绑定复杂:el-table使用Vue的数据绑定机制,当数据更新时,Vue需要遍历DOM树来更新绑定的数据,这也会增加渲染的复杂度和时间。
这个数据量不算大,但可能列数比较多,渲染时速度很慢,滚动会有卡顿,使用体验不佳。 但并不想做分页处理,想要尽可能接近excel的呈现。 2.做了分页处理每页也有200行数据30多列 滚动会有卡顿、多选、单选会有延迟 3.前端UI框架使用的是ElementUI,项目要求数据不分页一个表格至少要1000条数据,这时点击其他DOM操作,...
2、卡顿原因 因为数据量过多导致浏览器渲染过多的标签元素导致DOM树占⽤内存较⼤使得⽤户操作阻塞。具体原理可参考别的⼤佬写的⽂章： .3、解决⽅法及原理 原理 解决思路可参考： .<template> <!-- 使⽤ useVirtual 属性开启虚拟滚动使⽤虚拟滚动时，必须要固定表格⾼度和⾏⾼ --> <div ...
levelIdList)) // 查找下一层数据 let resolveArr = this.tableDataCopy let id // eslint-disable-next-line while (id = row.levelIdList.shift()) { const tarItem = resolveArr.find(item => item.id === id); tarItem.loadedChildren = true resolveArr = tarItem.children } // 处理下一层...
2.1、分析卡顿原因 打开浏览器的DevTools ,选中“performance”,可以看到页面卡顿主要是由于渲染慢导致的 1659518981837.png 1659519178874.png 2. 2、解决大量Demo渲染导致页面卡顿 使用方法:虚拟加载 思路:因为数据量一次过来了2000+ ,渲染demo 需要浪费很大的时间;首先想到是在视图范围内:先渲染10条数据,当用户使用滚轮...
其实对于el-table本身我也没有好的解决方案、只能给遇到同样问题的小伙伴推荐一下vxe-table了,vxe-table完全可以解决卡顿的问题 我用的是 vue3.x + vite 其他版本的vue也是支持的详情可以看下方的 gitHub和vxe-table文档 第一步 安装依赖 版本:vue3.x, 依赖库:xe-utils ...
错误排查:在使用中如果出现:readding 'style' undefined类似错误的, 可以先排查 u-table中height的值引起的。这里只以我这里出现的情况为基准作出此提示,仅供参考。 提示:需根据具体需求使用相应表格。例如:u-table 与 wx-grid的区别。 (具体:1.使用u-table 开启use-virtual不支持开展行,如果需要展开行,你需使用...
el-table嵌套el-select和el-input,循环出几百条或几千条数据时,下拉框选中回显卡顿和输入卡顿的问题el-input已找到了解决思路,如下:用原生input替换el-input,以减少el-input组件实例。并在原生input上应用el-input的样式,使前者后者外观一致。在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发...
有时候el-table的数据可能有成千上万条，而且又要在一页显示完，这时候页面渲染的dom太多了，可能会造成页面卡顿。因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。具体原理可参考别的大佬写的文章： DOM性能瓶颈与Javascript性能优化.原理 解决思路可参考： 页面中...