el-table在加载大量数据时卡顿,主要原因可能包括: DOM渲染压力大:当数据量很大时,el-table会创建大量的DOM节点,浏览器的渲染引擎需要花费较多的时间和资源来处理这些节点。 数据绑定复杂:el-table使用Vue的数据绑定机制,当数据更新时,Vue需要遍历DOM树来更新绑定的数据,这也会增加渲染的复杂度和时间。 内存占用高:大...
一次加载大量数据:table 表格需要有check 勾选,并且还要分组,分组也能进行勾选;一次性渲染的话,会出现页面卡顿现象,这样对用户来讲是非常不友好的 二、分析渲染卡顿原因和解决方案 2.1、分析卡顿原因 打开浏览器的DevTools ,选中“performance”,可以看到页面卡顿主要是由于渲染慢导致的 1659518981837.png 1659519178874.p...
1、为el-table增加懒加载功能,:load=“load” <el-table :data="tableData" row-key="id" :header-cell-style="{ color: '#333333' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :load="load" lazy> <template slot="empty"> <div style="margin-top: 30px"> <...
2、替换原el-table,el-table-column组件名 el-table替换为PlTable el-table-column替换为PlTableColumn 3、为PlTable组件增加如下属性: use-virtual// 开启虚拟渲染 :height="tableHeight"// 表格的高度 :row-height="35"// 表格每行的高度 注意:假如你的tableHeight和我一样是计算得来,请在PlTable上增加高度...
(具体:1.使用u-table 开启use-virtual不支持开展行,如果需要展开行,你需使用虚拟表格部分的ux展开行! 2.u-table不支持展开行,需要展开行使用ux-grid 3. ux-grid解决列多 行多导致卡的情况, u-table解决行多的情况,不解决列多的情况(如你的列超过70+,你可能就需要使用ux-grid了,因为此时你需要把列也虚拟...
关键字:element-ui, el-table ,大量数据,树状表格,展开折叠,卡顿,懒加载 遇到难题: element-ui里面的树状表格,当层级和数据过多的时候会出现点击展开和折叠的时候卡顿。数据量大概是 30 x 4 x 2 x 3 x 10 = 7200。 我以为是源码里的逻辑不好,debug源码,但是没有发现原因,后求助同事,得出是dom元素过多导...