element-table 数据过多时浏览器卡死

最新推荐文章于 2024-12-10 11:00:10 发布
原创 最新推荐文章于 2024-12-10 11:00:10 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客作者在优化页面性能时遇到问题，页面包含3个Echarts图表和1个Element-Table。当数据量达到几百条时，浏览器出现卡顿。最初误以为是Echarts的渲染问题，但通过注释Element-Table后发现，表格才是性能瓶颈。最终，作者选择手动绘制表格以解决性能问题。

页面上有3个echarts 和1个element-table，请求数据几百条时，浏览器直接卡死，开始还以为是echarts渲染的问题，一直在echarts上面找解决方法，后面将element-table一注释，整个页面都舒畅了，最后自己画的table…

已解决vue element 用el-tabs浏览器卡死的问题
疑问 搜索 动手 解决 记录
03-17 8439
文章最后有答案 遇到这个问题 ,起因用 el-tab-pane 与 el-dialog 组合导致浏览器卡死。 经过分析原因是 el-tab-pane 添加 内容 会出现内部死循环，从而导致浏览器卡死。 困惑许久 , 查询良久 ,列出了几个网上大仙们给的答案 , 如下: 一 . 降低版本系列(已尝试 , 垃圾没有效果) 二 . 重装tabs插件,全局引入系列(已尝试 , 垃圾没有效果) 三 . 算了直接给你们放最搞笑的一个(虽然搞笑,但是是唯一一个成功的) 哈哈哈哈,没有看到这图上评论的时候 , 我和同
element-ui下拉框数据过多，导致页面卡顿崩溃问题优化
weixin_42508580的博客
12-09 1万+
解决element 下拉选择数据量大时，导致页面卡顿甚至崩溃问题
Element UI中遇到的坑（一）el-tabs 组件导致浏览器崩溃的问题
陈乾的博客
03-27 2411
一、发生场景 最近在项目中使用到Dialog组件，并在Dialog组件中使用到el-tabs组件，在点击切换tab时没有问题，在点击关闭Dialog后浏览器就卡死，处于崩溃状态。 二、原因 在自查原因和网上搜索后发现有几种情况 1.el-tab组件本身的问题 2.vue与element ui版本问题 三、解决办法 1.el-tab-pane元素中内容去掉（el-tab-pane元素内不能有内容） 2.el-tabs 外面加上 el-row 以及 el-col 3. 给组件固定高度 4. vue版本过低elm
vue+element开发项目，使用tab页的时候导致浏览器卡死的解决办法
Z_Joker_J的博客
06-05 1783
el-tabs导致浏览器卡死问题 用了vue-element-template模版二次开发，项目中需要用到el-tabs 结果一用就卡死。 根据网上建议，在<el-tab-pane>标签里不放任何元素，可以。 但是无法满足项目需求。 于是继续找， 最后确定是element和vue版本冲突问题。 目前elemntUI的最新版本是2.13.0，vue版本是 "vue": "^2.6.11", "vue-aplayer": "^1.6.1", "vue-rout...
element table 数据量大页面卡顿
狗狗狗亮的博客
12-07 7723
table显示医院列表，这里后台未做分页，总共数据大约8000条。 一次性全部赋值给table整个页面都会卡顿好几秒。 查看了请求接口到数据返回的时间为192ms，可以接受。 应该是页面渲染的问题。 这边就在前端做了分页处理。 调用接口 // 获取医院列表 getHospitalList() { this.$api.Hospital.GetHospitalList().then(res => { if (res.status == 200) {
Vue3:el-table组件存在多列操作数据，表格卡顿问题优化。
qq_45061461的博客
12-10 2423
在我们的后台管理项目中，需要显示数据。普通的文本显示和一些需要操作的数据。需要操作的数据列多了。不可避免的会使得我们的浏览器渲染这些大体量的数据会导致卡顿。近期项目中就遇到了这个问题。刚开始不是那么明显。这个问题就更明显了。下拉滚动都会特别卡。1.在我前面的文章中已经封装过了tab表格。此实现就是在原来封装的组件当中实现，我就把一些需要应用的表格编辑的 文本 下拉。传递的数据类型上几篇文章中出现过。这个只是代码片段，只处理此问题情况。
el-table加载大量数据渲染慢导致页面卡死
m0_50007104的博客
10-11 2203
注意：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。
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
10-16
在开发基于 ElementUI 的项目过程中，可能会遇到一些问题，例如浏览器卡死的问题和组件使用报错未注册问题。 首先，关于浏览器卡死的问题。当升级到某个新版本后，虽然新组件可以正常使用，但可能会发现之前使用的...
解决nz-table底部固定合计栏 开启虚拟滚动后无法横向滚动
MockingBHM的博客
07-27 815
nz-table在底部固定合计栏，支持跟随表格对齐，滚动，解决性能问题，虚拟滚动
vue + vue-resource + element-ui项目中遇到的问题总结
ishell1021的博客
03-08 2349
运营智享遇到的问题(前端) vue + vue-resource + element-ui + vue-router + node.js + sass 1. el-table filter tag 使用filter-method处理数据过滤,当该标签下没有数据时标签切换不起作用 解决: 1.用el-table的filter-change方法处理过滤逻辑,而不用el-table-column...
element-ui el-tabs 页面卡死问题
潇兮水寒的博客
07-25 1871
直接贴源码： <el-card> <el-alert title="标题" :closable="false" show-icon type="warning"> </el-alert> <el-row class="my_row"> <el-col> <!-- 注意这里 a--> </el-col>
vue+element-ui el-table组件二次封装实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
wocwin的博客
09-03 5601
vue+element-ui el-table组件二次封装实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
热门推荐
D浩DzD的博客
09-30 1万+
element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
解决el-table树形数据量过大，导致页面卡顿问题
wwngxu的博客
01-15 4062
el-table树形数据懒加载
el-table 大表格 卡顿优化
SanOrintea的博客
04-27 1116
禁用的方法可以从https://blog.youkuaiyun.com/linan996/article/details/126745239这个里选（另外一提，这个文章中最后一个方法更好的写法是background: unset）一般表格都10+列，这个表格特殊就特殊再列很多，卡顿的主要原因是hover状态这个css的变化，在滑动的时候引起约800+（至少）个单元格dom变化，所以非常卡，于是禁用掉hover即可。遇到一个大表格，这个表格行数不多，最多100条，但是列很多，有400+列（麻了）。
解决el-table数据量过大加载卡顿问题
weixin_44220858的博客
09-28 5679
解决由于数据量过大。使用el-table后页面卡顿，有时候网页直接崩溃问题。
处理el-table大数据卡顿的问题，包含tree型数据格式
weixin_48463654的博客
08-21 4203
有时候el-table的数据可能有成千上万条，而且又要在一页显示完，这时候页面渲染的dom太多了，可能会造成页面卡顿。因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。具体原理可参考别的大佬写的文章：DOM性能瓶颈与Javascript性能优化.使用第三方插件 npmjs.com/package/pl-ta。解决方案：给表格固定高度，只渲染用户在表格中滚动的视图dom。解决思路可参考： 页面中长列表滚动的优化.
element的el-table 解决表格多页选择数据时，数据被清空
_夜渐凉
09-16 8249
官网的表格数据多选例子： 但当切换页数时，会自动触发方法： handleSelectionChange(val) 且val为[]，也就点击下一页时，把我们的数据都清空了 然后就开启了我的手写解决模式...仅参考...在最后面发现原来官方已经提供了解决办法...并且非常简单... 我打算用一个当前页的选择：batchSelection变量，与一个所有页选择：allBatchSel...
elementUI使用el-tabs时，页面崩溃卡死问题
tian_xuewu的博客
12-20 4348
问题描述： elementUI在某些特定版本下，使用==el-tabs==时，会造成页面崩溃卡死的问题； 解决方法： 方法1：在el-tabs标签上面，加一个兄弟节点–空的块级元素 ex:<div>&nbsp;</div> 此块级元素，要占位dom内容，但不设置宽高，即不影响页面为主； 方法2： 降级elementUI版本到2.6.3； 或者升级vue版本到2.6...
使用不了<el-table
最新发布
06-12
-数据未正确绑定（如data属性绑定错误）。-表格列定义与数据结构不匹配。由于用户没有提供具体错误现象，以下提供一个通用排查步骤：步骤1：检查控制台错误-打开浏览器控制台（F12），查看是否有JavaScript错误，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值