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

最新推荐文章于 2024-01-15 15:58:49 发布
最新推荐文章于 2024-01-15 15:58:49 发布
阅读量1.6k 收藏
点赞数
分类专栏： 项目经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/versious/article/details/115213955
版权

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

versious
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置问题，导致组件无法正常工作，比如在本案例中提到的“el-table不显示空白问题”。以下是对这个现象的深入分析及解决策略。 首先，让我们了解可能的...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k...
Element UI中遇到的坑（一）el-tabs 组件导致浏览器崩溃的问题
陈乾的博客
03-27 2161
一、发生场景 最近在项目中使用到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 1512
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 7542
table显示医院列表，这里后台未做分页，总共数据大约8000条。 一次性全部赋值给table整个页面都会卡顿好几秒。 查看了请求接口到数据返回的时间为192ms，可以接受。 应该是页面渲染的问题。 这边就在前端做了分页处理。 调用接口 // 获取医院列表 getHospitalList() { this.$api.Hospital.GetHospitalList().then(res => { if (res.status == 200) {
el-table加载大量数据渲染慢导致页面卡死
m0_50007104的博客
10-11 1447
注意：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。
element-ui el-tabs 页面卡死问题
潇兮水寒的博客
07-25 1612
直接贴源码： <el-card> <el-alert title="标题" :closable="false" show-icon type="warning"> </el-alert> <el-row class="my_row"> <el-col> <!-- 注意这里 a--> </el-col>
element-ui table组件如何使用render属性的实现
01-19
在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。 障碍： 类似于下面自定义表列的样式，...
监听element-ui table滚动事件的方法
10-17
当使用Element-UI的`el-table`组件时，监听滚动事件可以帮助我们实现无限滚动加载，即用户滚动到表格底部时自动加载下一页数据。 ### 方法 1. **设置表格基础结构** 首先，我们需要创建一个包含`el-table`的Vue模板...
el-data-table:element基于element-ui，轻松实现结界
05-13
创建el-data-table来解决业务问题，因此在其中设置了CRUD逻辑。 例如，要开发user api，请假设其相对路径如下： / api / v1 / users 宁静的CRUD API应该是： 取回 GET / api / v1 / users ? page = 1 & size = 10...
vue+element-ui el-table组件二次封装实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
wocwin的博客
09-03 4742
vue+element-ui el-table组件二次封装实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
D浩DzD的博客
09-30 1万+
element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
解决el-table树形数据量过大，导致页面卡顿问题
最新发布
wwngxu的博客
01-15 1932
el-table树形数据懒加载
el-table 大表格 卡顿优化
SanOrintea的博客
04-27 856
禁用的方法可以从https://blog.csdn.net/linan996/article/details/126745239这个里选（另外一提，这个文章中最后一个方法更好的写法是background: unset）一般表格都10+列，这个表格特殊就特殊再列很多，卡顿的主要原因是hover状态这个css的变化，在滑动的时候引起约800+（至少）个单元格dom变化，所以非常卡，于是禁用掉hover即可。遇到一个大表格，这个表格行数不多，最多100条，但是列很多，有400+列（麻了）。
解决el-table数据量过大加载卡顿问题
weixin_44220858的博客
09-28 4160
解决由于数据量过大。使用el-table后页面卡顿，有时候网页直接崩溃问题。
处理el-table大数据卡顿的问题，包含tree型数据格式
weixin_48463654的博客
08-21 3596
有时候el-table的数据可能有成千上万条，而且又要在一页显示完，这时候页面渲染的dom太多了，可能会造成页面卡顿。因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。具体原理可参考别的大佬写的文章：DOM性能瓶颈与Javascript性能优化.使用第三方插件 npmjs.com/package/pl-ta。解决方案：给表格固定高度，只渲染用户在表格中滚动的视图dom。解决思路可参考： 页面中长列表滚动的优化.
element的el-table 解决表格多页选择数据时，数据被清空
_夜渐凉
09-16 7792
官网的表格数据多选例子： 但当切换页数时，会自动触发方法： handleSelectionChange(val) 且val为[]，也就点击下一页时，把我们的数据都清空了 然后就开启了我的手写解决模式...仅参考...在最后面发现原来官方已经提供了解决办法...并且非常简单... 我打算用一个当前页的选择：batchSelection变量，与一个所有页选择：allBatchSel...
elementUI使用el-tabs时，页面崩溃卡死问题
tian_xuewu的博客
12-20 4031
问题描述： elementUI在某些特定版本下，使用==el-tabs==时，会造成页面崩溃卡死的问题； 解决方法： 方法1：在el-tabs标签上面，加一个兄弟节点–空的块级元素 ex:<div>&nbsp;</div> 此块级元素，要占位dom内容，但不设置宽高，即不影响页面为主； 方法2： 降级elementUI版本到2.6.3； 或者升级vue版本到2.6...
el-table大数据量渲染卡顿的一种思路
热门推荐
FlowingRiver
01-15 2万+
背景 现需要呈现一个表格，有近500行，30多列，使用vue+elementUI呈现。 这个数据量不算大，但可能列数比较多，渲染时速度很慢，滚动会有卡顿，使用体验不佳。 但并不想做分页处理，想要尽可能接近excel的呈现。 参考 网上寻找一番，参考了一些意见： VUE,ElementUI列表大数据卡顿问题？（已解决） element-ui table 表格 大数据展示解决方案 支付万级数据展示 思...
element-table分页展示数据
06-07
element-table 是一个基于 Vue.js 的表格组件，可以用来展示数据并进行分页。以下是一个简单的示例： 首先，我们需要在 Vue.js 中引入 element-ui 和 element-table 组件： ``` import Vue from 'vue' import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值