el-table 大数据量渲染，页面卡顿的解决方案

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量1.8k 收藏 2
点赞数
文章标签： 前端 vue.js javascript
原文链接：https://zhuanlan.zhihu.com/p/475819879
版权

原文：

el-table大数据量渲染卡顿的解决方案

描述：

当el-table的数据有成千上万条，且在同一页全部展示，此时页面渲染的dom太多可能造成页面卡顿

原因：

因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。

DOM性能瓶颈与Javascript性能优化

解决思路参考：

页面中长列表滚动的优化

解决方法：

使用第三方插件  https://www.npmjs.com/package/pl-table

yangqii
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
记住，为了保证用户体验，需要考虑数据量大时的性能优化，比如分批请求和处理数据，避免一次性加载大量数据导致页面卡顿。 总的来说，结合Vue.js、Element UI的`el-table`组件和`file-saver`库，我们可以构建出强大...
【Element-ui】el-table大数据量渲染卡顿问题
qq_39404437的博客
02-23 1万+
在项目开发中，遇到在表格中一次性加载完的需求，且加载数量不少，有几百几千条，并且每条都可能有自己的下拉框，输入框来做编辑功能，此时普通的el-table肯定会导致浏览器卡死，那么怎么办呢？
el-table大数据量渲染卡顿的解决方案
ygunoil的博客
03-04 361
1、现象 有时候el-table的数据可能有成千上万条，而且又要在一页显示完，这时候页面渲染的dom太多了，可能会造成页面卡顿。 解决方案：给表格固定高度，只渲染用户在表格中滚动的视图dom 2、卡顿原因 因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。具体原理可参考别的大佬写的文章： DOM性能瓶颈与Javascript性能优化. 3、解决方法及原理 原...
Vue2 el-table 数据量大的情况下使用虚拟滚动
njihkj的博客
06-14 647
el-table+el-pagination组件一起用时，从10条/页切换到100条/页会有几秒钟的loading卡顿，解决方法为使用虚拟滚动插件el-table-virtual-scroll注意事项：VirtualScroll组件中必须设置key-prop，否则会出现错行使用做表格虚拟滚动，是不支持ElementUI表格的原有的索引、多选、扩展行等功能，需要使用来兼容。组件内封装了，支持传入组件的props属性。
element中el-table大数据量渲染卡顿问题
未来可期的博客
11-09 4744
主体内容显示部分：页面默认进入显示的是第一个十条，也就是索引的[0,9]。当盒子滚动的时候滚动了一行默认显[1,10]，两行[2,11]…滚动盒子：计算出来当前所有数据的高度（为了方便计算行高默认相同，案例中行高45px），以便于撑起来盒子高度，显示滚动条。在开发过程中，一个表格需要无分页展示出几万条的数据。一次性渲染了几万条，几十列，造成大量DOM一次性渲染，直接造成至使页面卡死。：目前存在一个问题，鼠标必须在滚动条的盒子上移动才会有效果。我所写的案例是默认展示十条，接下来按十条描述。
el-table大数据量渲染卡顿的一种思路
热门推荐
FlowingRiver
01-15 2万+
背景 现需要呈现一个表格，有近500行，30多列，使用vue+elementUI呈现。 这个数据量不算大，但可能列数比较多，渲染时速度很慢，滚动会有卡顿，使用体验不佳。 但并不想做分页处理，想要尽可能接近excel的呈现。 参考 网上寻找一番，参考了一些意见： VUE,ElementUI列表大数据卡顿问题？（已解决） element-ui table 表格 大数据展示解决方案 支付万级数据展示 思...
解决el-table数据量过大加载卡顿问题
weixin_44220858的博客
09-28 3946
解决由于数据量过大。使用el-table后页面卡顿，有时候网页直接崩溃问题。
el-table显示数据量大导致页面卡顿问题优化
jl____的博客
09-21 1791
el-table显示数据量大导致页面卡顿问题优化
解决el-table树形数据量过大，导致页面卡顿问题
wwngxu的博客
01-15 1802
el-table树形数据懒加载
el-table加载大量数据渲染慢导致页面卡死
m0_50007104的博客
10-11 1404
注意：el-table的border属性好像在u-table中失效了，经测试可以在cell-style中加上border。问题：使用el-table数据量达到上千条，导致页面卡死浏览器卡死，不能进行其他操作，需求是不分页，分页页面不好看了。u-table-column 改为 u-table-column。解决：el-table组件改为u-table，增加固定高度。步骤：安装　npm install umy-ui。如果可以采用分页的话，个人认为分页是最好的办法。el-table改为u-table。
性能优化 | el-table中内嵌大量el-input控件导致渲染卡顿的问题
weixin_44303404的博客
05-06 1850
elementui中，el-table嵌入大量el-input的优化思路
el-table树形表格表单验证(列表生成序号)
10-15
`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格时，验证表单和生成唯一的序号对于确保数据的准确性和一致性至关重要。 ### 一、树形列表生成序号 生成树形列表...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 431
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 215
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 280
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 447
对于上云api开发学习过程中的错误教训积累总结
vue2 el-table嵌套多个el-input el-select el-cascader卡顿
06-22
Vue2中，`el-table` 组件与一系列子组件（如`el-input`、`el-select`和`el-cascader`）的嵌套使用可能会导致性能上的卡顿，尤其是在大数据量或者复杂交互的情况下。主要有以下几个可能的原因： 1. **渲染效率**：大量`el-input`和`el-select`可能会触发频繁的数据绑定和DOM更新，特别是当它们关联到表格行数据时。如果数据源非常大或者数据结构复杂，这会增加计算和渲染的工作量。 2. **DOM操作**：`el-cascader`的下拉选择通常会动态添加或移除节点，如果嵌套层级很深，频繁的DOM操作可能导致性能下降。 3. **递归组件**：当`el-cascader`嵌套在多个层级时，会形成树状结构，每个节点都可能触发自身的渲染，这在数据量大的情况下容易造成性能瓶颈。 4. **事件监听**：每个输入框和选择器都可能有自身的事件监听，过多的事件处理可能会消耗CPU资源。 为了解决这个问题，你可以尝试以下优化策略： - **懒加载和虚拟滚动**：对大数据量的表格，可以考虑使用虚拟滚动，只显示可见区域的数据，减少DOM节点数量。 - **计算属性和缓存**：尽可能减少不必要的数据计算，例如，可以将计算后的值作为缓存，而不是每次都重新计算。 - **优化组件的事件穿透**：检查是否有不需要的事件穿透或者是否能减少事件的触发频率。 - **组件组合优化**：考虑重构组件结构，减少组件的嵌套，或者使用更轻量级的替代组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值