el-table是Element UI库中的一个表格组件,当处理大量数据时,页面卡顿的主要原因通常包括: DOM渲染负担:大量的DOM节点会显著增加浏览器的渲染负担。 JavaScript执行时间过长:数据处理和渲染逻辑复杂或数据量巨大时,JavaScript执行时间可能过长。 内存占用高:大量数据存储在内存中,可能导致内存占用过高,影响页面性能。 2....
el-table大数据量渲染卡顿的解决思路 背景 1.现需要呈现一个表格,有近500行,30多列,使用vue+elementUI呈现。 这个数据量不算大,但可能列数比较多,渲染时速度很慢,滚动会有卡顿,使用体验不佳。 但并不想做分页处理,想要尽可能接近excel的呈现。 2.做了分页处理每页也有200行数据30多列 滚动会有卡顿、多选、单...
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...
每个el-select里的option数量其实并不多,大概10个左右。 但是当用户插入10条数据的时候,也就是页面里el-table里有将近300个el-select组件的时候,很明显的卡顿就出现。 将近3-4秒,如果操作过于频繁甚至会更久。 如果用源生的select跟option标签替换所有el-select去除冗余dom后的确效率会快很多,但是也缺失了很多el-...
出现卡顿的原因如下：1、数据量过大：el—table 组件在渲染大量数据时会导致性能下降。如果表格中有大量的数据需要显示和更新，会导致页面卡顿。2、事件处理问题：如果 el—switch 组件绑定了事件处理函数，而且每个组件都有独立的事件处理，当有大量 el—switch 组件时，事件处理函数的触发会变得很频繁，...
其实对于el-table 本身我也没有好的解决方案、只能给遇到同样问题的小伙伴推荐一下vxe-table了,vxe-table完全可以解决卡顿的问题 我用的是 vue3.x + vite 其他版本的vue也是支持的详情可以看下方的 gitHub和vxe-table文档 第一步 安装依赖 版本:vue3.x, 依赖库:xe-utils ...
这种处理方式会在展开过多时慢慢变得卡顿,所以需要提供一个逻辑,使得用户可以一键回到第一层,且卸载所有子节点。 初始化表格代码: this.tableDataCopy=res.data||[]// 备份的全量数据this.tableData=JSON.parse(JSON.stringify(res.data)).map(item=>{// 展示数据// hasChildren 表示需要展示一个箭头图标item....
el-table嵌套el-select和el-input,循环出几百条或几千条数据时,下拉框选中回显卡顿和输入卡顿的问题el-input已找到了解决思路,如下:用原生input替换el-input,以减少el-input组件实例。并在原生input上应用el-input的样式,使前者后者外观一致。在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发...