一、分析卡顿原因 el-table在加载大量数据时卡顿,主要原因可能包括: DOM渲染压力大:当数据量很大时,el-table会创建大量的DOM节点,浏览器的渲染引擎需要花费较多的时间和资源来处理这些节点。 数据绑定复杂:el-table使用Vue的数据绑定机制,当数据更新时,Vue需要遍历DOM树来更新绑定的数据,这也会增加渲染的复杂度和时间。
2、卡顿原因 因为数据量过多导致浏览器渲染过多的标签元素导致DOM树占⽤内存较⼤使得⽤户操作阻塞。具体原理可参考别的⼤佬写的⽂章： .3、解决⽅法及原理 原理 解决思路可参考： .<template> <!-- 使⽤ useVirtual 属性开启虚拟滚动使⽤虚拟滚动时，必须要固定表格⾼度和⾏⾼ --> <div ...
这个数据量不算大,但可能列数比较多,渲染时速度很慢,滚动会有卡顿,使用体验不佳。 但并不想做分页处理,想要尽可能接近excel的呈现。 2.做了分页处理每页也有200行数据30多列 滚动会有卡顿、多选、单选会有延迟 3.前端UI框架使用的是ElementUI,项目要求数据不分页一个表格至少要1000条数据,这时点击其他DOM操作,...
打开浏览器的DevTools ,选中“performance”,可以看到页面卡顿主要是由于渲染慢导致的 1659518981837.png 1659519178874.png 2. 2、解决大量Demo渲染导致页面卡顿 使用方法:虚拟加载 思路:因为数据量一次过来了2000+ ,渲染demo 需要浪费很大的时间;首先想到是在视图范围内:先渲染10条数据,当用户使用滚轮/ 滚动条滑动的时...
element表格el-table组件实现虚拟滚动,解决数据量大渲染DOM过多而卡顿问题 当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,使用分页或则懒加载这些方案也无法解决,这些处理方法在页面加载到足够多的数据的时候,随着页面追加渲染的DOM越来越多,也会导致页面卡顿,甚至卡死。
其实对于el-table 本身我也没有好的解决方案、只能给遇到同样问题的小伙伴推荐一下vxe-table了,vxe-table完全可以解决卡顿的问题 我用的是 vue3.x + vite 其他版本的vue也是支持的详情可以看下方的 gitHub和vxe-table文档 第一步 安装依赖 版本:vue3.x, 依赖库:xe-utils ...
渲染树形数据时,必须要指定 row-key和isTreeTable属性, row 中包含 children字段(必须不然展开收起会有问题)。 支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。
出现卡顿的原因如下：1、数据量过大：el—table 组件在渲染大量数据时会导致性能下降。如果表格中有大量的数据需要显示和更新，会导致页面卡顿。2、事件处理问题：如果 el—switch 组件绑定了事件处理函数，而且每个组件都有独立的事件处理，当有大量 el—switch 组件时，事件处理函数的触发会变得很频繁，...
我们知道操作dom会引起页面的重绘重排。数据量过多导致浏览器渲染过多的标签元素,频繁的重绘重排导致DOM树占用内存较大使得用户操作阻塞。element-ui中的el-table组件在大数据的渲染上也是差强人意。对于动态数据想要不重新渲染是不可能的,那么只能让他去少渲染。