elementUI table组件不分页数据太多导致页面卡顿

最新推荐文章于 2023-11-09 18:04:29 发布
最新推荐文章于 2023-11-09 18:04:29 发布
阅读量672 收藏
点赞数
文章标签： elementui Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48911985/article/details/129545851
版权

项目中table数据好几千条，后台返回所有数据；

table loading时间长，一开始以为是接口处理时间长，最后排查原因为数据太多浏览器渲染压力大，导致加载时间长并造成页面卡顿

解决方法：增加前端分页

weixin_48911985
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+elementUI组件table实现前端分页功能
10-15
在Element UI中，`el-table`组件用于显示表格数据，而`el-pagination`组件则用于创建分页栏。下面是一个简单的示例，展示了如何使用这两个组件来实现前端分页： ```html <el-table :data="tableData.slice(...
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页...
面试：数据量很大，分页查询很慢，有什么优化方案？
程序猿DD
09-19 901
点击上方蓝色“程序猿DD”，选择“设为星标”回复“资源”获取独家整理的学习资料！来源 |cnblogs.com/youyoui/p/7851007.html当需要从数据库查询的表有上万...
解决el-table数据量过大加载卡顿问题
weixin_44220858的博客
09-28 3775
解决由于数据量过大。使用el-table后页面卡顿，有时候网页直接崩溃问题。
elementui里的table表格组件大数据渲染严重的性能卡顿问题
.伊泽瑞尔
04-19 3226
elementui里的table表格组件在面对大数据量的时候渲染会出现严重的性能卡顿问题
【性能优化】虚拟懒加载（下拉滚动加载长列表）element-puls+el-table
老衲的少女心i~
09-12 1761
长列表性能优化
element中el-table大数据量渲染卡顿问题
最新发布
未来可期的博客
11-09 4407
主体内容显示部分：页面默认进入显示的是第一个十条，也就是索引的[0,9]。当盒子滚动的时候滚动了一行默认显[1,10]，两行[2,11]…滚动盒子：计算出来当前所有数据的高度（为了方便计算行高默认相同，案例中行高45px），以便于撑起来盒子高度，显示滚动条。在开发过程中，一个表格需要无分页展示出几万条的数据。一次性渲染了几万条，几十列，造成大量DOM一次性渲染，直接造成至使页面卡死。：目前存在一个问题，鼠标必须在滚动条的盒子上移动才会有效果。我所写的案例是默认展示十条，接下来按十条描述。
element/Antd vue 表格性能问题，表格数据多导致页面卡顿问题解决思路与方法
热门推荐
lihaogn的博客
09-26 1万+
element/Antd vue 表格性能问题，表格数据多导致页面卡顿问题解决思路与方法 工作中，使用了 Antd vue 中的 a-table 组件，当表格数据过多时导致页面卡顿，并且表格多选也会出现卡顿，测试提出了性能bug。。。 table 没有设计成分页那种加载数据的形式，而是用滚动加载的方式不停地加载数据，我也是醉了。。。 在百度了一圈后，发现解决该问题主要是用虚拟滚动的思路。引发页面卡顿的原因主要是由于数据量太大导致渲染的 dom 较多，然后页面就卡顿了。。。 下面使用 element 中的 e
Vue+ElementUI table实现表格分页
12-13
但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。 后端分页：因为是后端分页，前端在每点击一次分页...
elementUI table组件
11-09
elementUI table组件 使用vue组件编写的el-table 反正就是一个表格组件， <el-table ref="table" v-loading="pageParm.loading" :max-height="pageParm.tableHeight || undefined" :data="data" :default-...
vue el-table表格数据,不分页,鼠标滚动实现数据懒加载
Seven71111的博客
10-13 9752
当前有一个需求，页面不分页，又想在一页显示全部数据，这个时候其实就可以用数据懒加载。 随鼠标滚动到滚动条末尾，自动加载下一页的数据。 create的时候默认加载20条数据 这里差不多到末端了 鼠标滑到末端后，触发加载第二页数据 代码实现： 先定义个table (getPageBodyHeight 方法是我通过页面自适应监听页面宽高变化，之前帖子有栗子，计算table的高度，简单点的可以自己设置固定高度) <el-table border .
如何加快HTML页面加载速度
碌人乘凉, 黎硕 --> Aerchi.com
03-23 93
1，页面减肥页面的肥瘦是影响加载速度最重要的因素删除不必要的空格、注释将inline的script和css移到外部文件可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥2，减少文件数量减少页面上引用的文件数量可以减少HTTP连接数许多JavaScript、CSS文件可以合并最好合并，人家财帮子都把自己的JavaScript functions和Proto...
vue el-tabel 后端不分页 前端分页方法（个人笔记）
Zzhwkpd的博客
06-01 924
后端不做分页，前端解决分页方法
vue+element-ui 在后端没有做分页的情况下，前端独立完成el-table表格的分页-滚动到底部加载新数据
weixin_54129994的博客
05-18 543
1、首先可以查看以下链接，给el-table表格绑定上监听滚动条的事件，做成全局的自定义指令。 链接: https://blog.csdn.net/weixin_54129994/article/details/116987122. 2、其次在数据请求完毕后，初次渲染10条，将完整数据保存在另外一个变量中去。 data() { return { // 渲染表格的数据 tableData: [], // 保存表格的完整数据 tableDataTotal
vue中element 的 el-table数据量大时，出现卡顿情况解决办法
qq_39250610的博客
12-26 3145
el-table 数据量大出现页面卡死情况解决
ie下elementUI el-table很卡的问题
langyalaoa的博客
12-10 3617
1、升级elementUI到v2.8.0以上 2、避免使用show-overflow-tooltip 3、在el-table或父元素上设置z-index，或调高z-index （针对ie）
【ElementUI】el-table可编辑/输入框 卡顿性能问题解决案
csdn_vplus的博客
04-13 9404
大家好，我是九幡。 在这篇文章我将为大家分享一个优化可编辑el-table性能问题的方案。 目录 问题背景 原因分析 解决思路 样例代码 页面效果 方案的优缺点 问题背景 用el-table配合el-input直接渲染可编辑行，在数据量大的情况下，会出现输入卡顿的问题。 原因分析 1. el-input组件实例数量过多。 2. el-input的v-model在表单输入时频繁触发input事件。 解决思路 1. 用原生input替换el-input，以减...
element ui 弹出框里的table滚动卡顿问题
RubyLinT的博客
04-12 624
修改弹出框样式：z-index:9999;
应对el-table中有el-input时，数据太多卡顿问题
hahah1234111111的博客
05-20 2243
卡顿是因为输入框数据是双向绑定的，输入内容时表格数据会刷新，重新渲染表格内容导致渲染次数太多会卡顿。网上大多数解决思路是用原生input替换el-input，再加上lazy，但是el-input的很多东西就用不了了，比如，校验。解决思路：封装el-input，给输入框加上节流，在输入内容之后过200ms之后再去更改表格的数据，这样表格渲染就变少，连续输入就不卡了，外部使用error显示校验结果。
el-table嵌入太多el-input导致卡顿 不分页 需要选择表内数据
07-08
如果您不考虑分页加载数据，而是需要同时展示大量的el-input输入框，并且由于数量过多导致卡顿的问题，可以尝试以下优化方案： 1. 虚拟滚动：仍然可以考虑使用el-table的虚拟滚动功能，将表格内容进行分块渲染，只渲染当前可见区域的输入框，而不是一次性渲染全部输入框。这样可以减少不可见区域的渲染压力。 2. 组件重用：对于大量重复的el-input组件，可以尝试将其进行组件化并进行复用，而不是每个输入框都创建一个新的el-input实例。这样可以减少内存占用和渲染开销。 3. 节流和防抖：对于输入框的事件监听，可以使用节流和防抖的方式来控制事件的触发频率，避免频繁触发渲染操作，从而提高性能。 4. 异步更新：如果输入框的数据是通过异步请求获取的，可以考虑在数据获取完成后再进行渲染，而不是等待全部数据都获取完成再一次性渲染。这样可以提前展示部分输入框，减少页面卡顿感。 5. 性能优化：检查代码中是否存在性能瓶颈，如不必要的计算、非高效的循环等，进行优化以提高整体性能。 请注意，以上建议仍然是基于大量输入框导致卡顿的情况，如果您有其他具体需求或限制，请提供更多信息，我可以为您提供更准确的帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值