列表页窗口高度改变导致loop limit exceeded

已于 2022-05-16 18:12:10 修改
阅读量946 收藏
点赞数
文章标签： vue 前端
于 2022-05-16 18:09:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eric_web/article/details/124804910
版权

项目场景：

列表页窗口高度改变导致loop limit exceeded
目前列表页布局都采用了列表高度自适应，最大高度不超过页面剩余最大高度，如图
在这里插入图片描述
在这里插入图片描述

问题描述

列表页面在改变窗口高度时，会疯狂报错，如图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

原因分析：

开始以为是计算maxHeight的逻辑有问题，审查了一遍代码后没有发现逻辑异常，并且其它项目均使用了该方案，没有出现类似问题。应该不是代码逻辑的问题，就还有一种可能，本项目的table页布局有问题，又去逐层分析dom的css样式，终于发现问题是因为table-box高度没有被限制，页面初始化后根据kfTable计算maxHeight，maxHeight更新又会影响table-box高度，它们俩互相反复触发

解决方案：

在这里插入图片描述

下面是flex:1布局加上overflow:hidden和没加的对比

在这里插入图片描述
在这里插入图片描述

进阶的前端小弟
关注
使用elementui的el-table时，出现错误：ResizeObserver loop limit exceeded
uncle_Huang的博客
03-12 5665
使用elementui的el-table时，出现错误：ResizeObserver loop limit exceeded。 在网上搜到很多解决方法，最后找到了对自己有效的解决办法。 在el-table里加一行这个就行了。 <el-table-column type="index"></el-table-column> ...
数仓开发面试题-Spark
话数Science
10-28 277
和Parquet类似，ORC文件也是以二进制方式存储的，所以是不可以直接读取，ORC文件也是自解析的，它包含许多的元数据，这些元数据都是同构ProtoBuffer进行序列化的。通过这三种文件存储格式的测试对比，ORC文件存储格式无论是在空间存储、导数据速度还是查询速度上表现的都较好一些，并且ORC可以一定程度上支持ACID操作，社区的发展目前也是Hive中比较提倡使用的一种列式存储格式，另外，本次测试主要针对的是Hive引擎，所以不排除存在Hive与ORC的敏感度比PARQUET要高的可能性。
ResizeObserver loop limit exceeded
Silyeclan的博客
04-11 1479
ResizeObserver loop limit exceeded（vue3+elementui-plus el-table在使用动态列时报错）
element-plus 报错 ResizeObserver loop limit exceeded 解决
最新发布
qq_67572731的博客
09-02 576
【代码】element-plus 报错 ResizeObserver loop limit exceeded 解决。
ResizeObserver loop limit exceeded el-table报错
wangshuaibinggg的博客
05-24 1437
我们在 el-table使用时，不断触发元素重绘，系统的错误监听系统监听到无数个ResizeObserver loop limit exceeded 错误。在main.js中添加上面代码即可完美解决。
apicloud——ResizeObserver loop limit exceeded——bug修复
yehaocheng520的博客
12-22 770
最近在写apicloud的项目，在页面切换时，发现了一个报错：ResizeObserver loop limit exceeded，经过排查，发现是el-table组件报的错误。 也就是elementUI中的table组件。 网上百度后发现，也有其他人遇到跟我同样的问题。 网上给出的答案是：el-table表格的宽度问题导致的报错。因此我也从相同的角度去处理： 我将某一列设置width的一项中的width取消，给表格最后一列添加上width（之前的最后一列是没有设置宽度的）,不设置宽度的列自适应宽度。
: ResizeObserver loop limit exceeded
江湖行骗老中医
10-09 1809
项目中遇到这个报错，浏览器控制台不报错，监控平台报错； 错误原因： 由于项目中使用了自定义指令v-adaptive动态修改表格的高，element ui table的 addResizeListener 监听，动态改变table的高，会多次渲染table，导致监控平台报错 错误调试方式： created() { window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, erro...
antd vue table ResizeObserver loop limit exceeded
09-13
对于 `antd vue table` 的 `ResizeObserver loop limit exceeded` 错误，这通常是由于 DOM 元素的尺寸变化频繁触发 `ResizeObserver` 导致的。 解决这个问题的一种方法是使用 `debounce` 函数来限制触发 `...
surely vue table报错ResizeObserver loop limit exceeded
03-29
这是由于使用了Vue.js的resize-detector插件，并且在Vue组件中使用了该插件，导致了循环调用，从而触发了ResizeObserver循环限制错误。 解决方法： 1. 升级resize-detector版本：使用Vue.js的resize-detector插件...
单机架构升级集群架构--redis主从集群搭建工作记
java_龙
06-27 359
概述     接上一篇博文(https://my.oschina.net/u/2342969/blog/995598)的架构图，将分以下三步完成架构优化工作     redis主从集群搭建     nginx主备高可用环境搭建     servi...
Redis 下载安装
qq_33753147的博客
10-18 9033
Redis 下载安装
antV报错ResizeObserver loop limit exceeded
weixin_45273478的博客
03-27 1519
使用Ant design Vue的table表格组件报错：ResizeObserver loop limit exceeded，这个报错不会在控制台打印，也不会影响代码执行效果，官方给出的办法是忽略报错，即使监听了报错，并忽略报错信息，:scroll="{ x: 1500, y: 600 }"为:scroll="{ y: 600 }"，也就是去掉了x轴的横向滚动，让表格自适应就可以了。但是在页面上还是会出现黑框提示，后来修改了属性。
JS错误：ResizeObserver loop limit exceeded
wm931020的博客
08-27 2485
最近在给三月份开发的项目，引入公司使用的一个性能检测网站，然后看到JS错误率100%，去检测网站看了下，错误列表里面展示：ResizeObserver loop limit exceeded；然后查了一圈，发现，应该是项目引入的antd的Table造成的，排查一圈，发现是在开发中设置antd的table横向滚动，其中x设置的都是300，然而表格的宽度 远远大于300，所以宽度溢出，造成的JS错误。将x轴的滚动去掉，就没有再报错了。 ...
记一个报错 ResizeObserver loop limit exceeded
MoveLikeRabbit的博客
05-18 9766
起因：项目中onError监听到了异常 window.addEventListener('error', ()=>{}）window.addEventListener('error', ()=>{}） 并发现了报错 查询之后发现 https://github.com/ant-design/ant-design/issues/23246 antd忽略了该报错 https://github.com/ant-design/ant-design/blob/a51439cbbabef454e352188
忽略埋点记录的ResizeObserver - loop limit exceeded
HYeeee的博客
02-14 1256
参考来源：ResizeObserver - loop limit exceeded 这个一个良性的报错，可以忽略
v-md-editor 高度导致 ResizeObserver loop limit exceeded
m0_37539286的博客
03-27 2577
v-md-editor 高度导致 ResizeObserver loop limit exceeded
element Plus 报错ResizeObserver loop limit exceeded at eval
qq_43688916的博客
04-12 1539
试了加type=“index” 也试了加min-width都不行。每一个el-table-column固定宽度的话样式太丑不可取。最后终于找到了，在app.vue中加入以下代码即可。刚开始没事 浏览器缩放就出现这个问题。
vue3 element-plus ResizeObserver loop limit exceeded
meis27461的博客
07-18 221
不过大概原因就是el-table表格的样式重置的问题。经过查阅之后发现react，vue2也有这个报错。给每个 el-table-column设置一下。
跳转页面ResizeObserver loop limit exceeded 报错
09-04
您好！对于报错 "ResizeObserver loop limit exceeded"，通常是由于 ResizeObserver 的监听器函数中发生了循环调用导致的。ResizeObserver 是一个用于监听元素大小变化的 API，当元素大小发生变化时会触发监听器函数。 要解决这个问题，您可以尝试以下几个方法： 1. 检查代码中是否存在循环调用：请确认您的代码中是否存在 ResizeObserver 的监听器函数中的代码会引发元素大小变化，从而再次触发监听器函数。这可能是一个无限循环调用的原因。 2. 添加节流或防抖机制：由于 ResizeObserver 会连续触发监听器函数，您可以使用节流或防抖机制来限制函数的执行频率。这样可以避免过多的函数调用导致循环问题。例如，使用 lodash 库中的 throttle 函数或 debounce 函数。 3. 检查是否需要停止监听：如果您在某个时刻不再需要监听元素大小的变化，可以使用 ResizeObserver 的 disconnect 方法停止监听。 4. 确认代码逻辑是否正确：请检查您的代码逻辑，确保在监听器函数中没有意外的元素大小变化导致无限循环调用的情况。 希望这些方法能够帮助您解决问题！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值