el-table 在渲染大量数据时,会因为 DOM 元素的剧增而导致浏览器渲染变慢,进而出现卡顿现象。尤其是在每行数据包含多个输入框或下拉框等复杂组件时,渲染压力会更大。 2. 尝试分页或懒加载数据 分页:将数据分成多页显示,每页只加载固定数量的数据。这样可以在保证用户体验的同时,减少单次渲染的数据量。 懒加载:在...
1、现象 有时候el-table的数据可能有成千上万条,而且又要在一页显示完,这时候页面渲染的dom太多了,可能会造成页面卡顿。 解决方案:给表格固定高度,只渲染用户在表格中滚动的视图dom 2、卡顿原因 因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使
3.3 分组引入check 组件,table 全选,单选使用check 组件,不实用 type="check" 分组引入check <el-table-columntype="districtname"prop="districtname"label="区域名称"align="center"><template#default="scope"><templatev-if="cameraGroupObj[scope.row.districtid]"><TableCheckref="setTableCheck":label="sc...
解决完dom过大问题之后,还有一个问题,如果遇到dom复杂例如element的组件也要处理这类这么大数据量的表单显然是会卡顿的。 解决问题之前我们先思考一下用以上的方法为什么会造成卡顿呢? 问题其实出在高频触发DOM的更新,由于vue是使用双向绑定进行页面更新的,每次绑定的数据更新都会触发页面的DOM进行更新,所以导致了,我们...
针对element 的el-table 大数据量的勾选卡顿问题 ,有多种的解决方案,但是我更加倾向于使用uMy-ui 使用方法: 1. 安装npm install umy-ui 2.引用: 2.1 完整引入 在main.js 中写入以下内容: import Vuefrom'vue';import UmyUifrom'umy-ui'import'umy-ui/lib/theme-chalk/index.css';// 引入样式import App...
我们知道操作dom会引起页面的重绘重排。数据量过多导致浏览器渲染过多的标签元素,频繁的重绘重排导致DOM树占用内存较大使得用户操作阻塞。element-ui中的el-table组件在大数据的渲染上也是差强人意。对于动态数据想要不重新渲染是不可能的,那么只能让他去少渲染。
一次性数据量过大。做分页和数据分批加载。或者用别的优化过的table组件，一般是用了虚拟列表来优化。
一次性渲染一万条肯定会卡的呀 一般表格数据都要分页展示的呢，一页几十一百条 或者你给表格限高，...
table处理速度快。根据查询相关信息显示，el-table的数据可能有成千上万条，而且又要在一页显示完，这时候页面渲染的dom太多了，可能会造成页面卡顿。table处理的数据比较快。