el-table在加载大量数据时卡顿,主要原因可能包括: DOM渲染压力大:当数据量很大时,el-table会创建大量的DOM节点,浏览器的渲染引擎需要花费较多的时间和资源来处理这些节点。 数据绑定复杂:el-table使用Vue的数据绑定机制,当数据更新时,Vue需要遍历DOM树来更新绑定的数据,这也会增加渲染的复杂度和时间。 内存占用高:大...
1、用table或者pl-table替换el-table。尝试后发现性能提升不大,仍然占用大量内存。 2、网上很多解决方案是说通过分页来加载,但我们的列表数据有关联,不能使用分页。 原因及解决方案: 经查,性能差的主要原因是,列表生成过程中产生大量的虚拟dom和真实dom,大量占用内存。 解决思路。 1、假滚动事件:拖动滚动滑块,并不...
因为返回的数据量很大,返回的数据还需要进行二次处理,在列表中还有输入框以及下拉选框,所以加载大量数据渲染的时候要加载非常久,甚至有页面崩溃的情况 如下图片显示 table大概数据 调研 1.调研了vue-easytable,它的自定义一些相关的都是用的jsx的语法,对于只写过vue element项目的人员来说,不是很习惯,支持ie11 2....
id]; return item; }); //懒加载方法 load (row, treeNode, resolve) { // 层级关系备份 const idCopy = JSON.parse(JSON.stringify(row.levelIdList)) // 查找下一层数据 let resolveArr = this.tableDataCopy let id // eslint-disable-next-line while (id = row.levelIdList.shift()) { ...
vue 中 elementUI el-table 实现滚动加载 一、需求 vue 中 elementUI el-table 实现滚动加载,场景:当表格需要显示大量数据时,又想通过一页来进行展示数据。 二、实现方法 a、监听表格对应的滚动条 当表格滚动条到达底部时,通过监听触发加载下一页的方法。 b、
ElementPlus/Element-el-table数据量很大、在没有分页的时候页面会出现卡顿的情况 1 收藏 其实对于el-table 本身我也没有好的解决方案、只能给遇到同样问题的小伙伴推荐一下vxe-table了,vxe-table完全可以解决卡顿的问题 我用的是 vue3.x + vite 其他版本的vue也是支持的详情可以看下方的 gitHub和vxe-table文档 ...
</el-table> </template> <script> exportdefault{ data() { return{ tableData: [],// 初始数据,可以根据实际需求进行修改 page:1,// 当前页码,默认为第1页 pageSize:20,// 每页显示的数据条数,可以根据实际需求进行修改 }; }, methods: { loadMoreData() { // 模拟异步加载数据,可以根据实际需求进...
el-table嵌套el-select和el-input,循环出几百条或几千条数据时,下拉框选中回显卡顿和输入卡顿的问题el-input已找到了解决思路,如下:用原生input替换el-input,以减少el-input组件实例。并在原生input上应用el-input的样式,使前者后者外观一致。在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发...
我们知道操作dom会引起页面的重绘重排。数据量过多导致浏览器渲染过多的标签元素,频繁的重绘重排导致DOM树占用内存较大使得用户操作阻塞。element-ui中的el-table组件在大数据的渲染上也是差强人意。对于动态数据想要不重新渲染是不
一、要实现的效果 一次加载大量数据:table 表格需要有check 勾选,并且还要分组,分组也能进行勾选;一次性渲染的话,会出现页面卡顿现象,这样对用户来讲是非常不友好的 ...