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

原创 已于 2022-05-16 18:12:10 修改 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #前端

于 2022-05-16 18:09:44 首次发布
博客讲述了在项目中遇到的列表页面窗口高度调整时疯狂报looplimitexceeded错误的问题。作者深入分析了原因，发现是由于table-box的高度未被限制，与maxHeight计算互相触发导致的无限循环。解决方案是通过添加overflow:hidden属性来限制table-box的高度，从而避免了错误的发生。

项目场景：

列表页窗口高度改变导致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 5977
使用elementui的el-table时，出现错误：ResizeObserver loop limit exceeded。 在网上搜到很多解决方法，最后找到了对自己有效的解决办法。 在el-table里加一行这个就行了。 <el-table-column type="index"></el-table-column> ...
Vue使用element-plus的table组件报错ResizeObserver loop completed with undelivered notifications.
JackieDYH的博客
06-11 2086
ERROR报错ResizeObserver loop completed with undelivered notifications.
忽略埋点记录的ResizeObserver - loop limit exceeded
HYeeee的博客
02-14 1352
参考来源：ResizeObserver - loop limit exceeded 这个一个良性的报错，可以忽略
ResizeObserver loop limit exceeded报错解决方案
卑微牛马学习笔记
11-24 2952
ResizeObserver loop limit exceeded报错解决方案
ResizeObserver loop limit exceeded
Silyeclan的博客
04-11 1960
ResizeObserver loop limit exceeded（vue3+elementui-plus el-table在使用动态列时报错）
【elementplus】解决改变屏幕大小时el-table报错ResizeObserver loop limit exceeded
bbt953的博客
07-11 3371
解决改变屏幕大小时el-table报错ResizeObserver loop limit exceeded
uniapp 微信小程序地图报错 ResizeObserver loop limit exceeded
最新发布
07-26
在使用 UniApp 开发微信小程序时，地图组件出现 `ResizeObserver loop limit exceeded` 错误是一个较为常见的问题。该错误通常发生在页面布局发生变化或组件尺寸动态调整时，浏览器尝试追踪这些变化的过程中超出了...
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插件...
antd table scrool={{y:500}}报错resizeobserver loop limit exce
04-03
首先，ResizeObserver loop limit exceeded这个错误通常发生在元素的大小变化触发了ResizeObserver的回调函数，而回调函数内部的操作又导致元素大小再次变化，形成一个无限循环，直到超过浏览器设定的循环次数限制。...
apicloud——ResizeObserver loop limit exceeded——bug修复
yehaocheng520的博客
12-22 944
最近在写apicloud的项目，在页面切换时，发现了一个报错：ResizeObserver loop limit exceeded，经过排查，发现是el-table组件报的错误。 也就是elementUI中的table组件。 网上百度后发现，也有其他人遇到跟我同样的问题。 网上给出的答案是：el-table表格的宽度问题导致的报错。因此我也从相同的角度去处理： 我将某一列设置width的一项中的width取消，给表格最后一列添加上width（之前的最后一列是没有设置宽度的）,不设置宽度的列自适应宽度。
: ResizeObserver loop limit exceeded
江湖行骗老中医
10-09 1903
项目中遇到这个报错，浏览器控制台不报错，监控平台报错； 错误原因： 由于项目中使用了自定义指令v-adaptive动态修改表格的高，element ui table的 addResizeListener 监听，动态改变table的高，会多次渲染table，导致监控平台报错 错误调试方式： created() { window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, erro...
antV报错ResizeObserver loop limit exceeded
weixin_45273478的博客
03-27 1639
使用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 2626
最近在给三月份开发的项目，引入公司使用的一个性能检测网站，然后看到JS错误率100%，去检测网站看了下，错误列表里面展示：ResizeObserver loop limit exceeded；然后查了一圈，发现，应该是项目引入的antd的Table造成的，排查一圈，发现是在开发中设置antd的table横向滚动，其中x设置的都是300，然而表格的宽度 远远大于300，所以宽度溢出，造成的JS错误。将x轴的滚动去掉，就没有再报错了。 ...
记一个报错 ResizeObserver loop limit exceeded
MoveLikeRabbit的博客
05-18 9913
起因：项目中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
v-md-editor 高度导致 ResizeObserver loop limit exceeded
m0_37539286的博客
03-27 2732
v-md-editor 高度导致 ResizeObserver loop limit exceeded
[antdesign] a-table 使用之后 ResizeObserver loop limit exceeded
m0_49789433的博客
04-26 874
因为 :scroll="{ x: '30%' | true }" 删除之后就ok了。我是使用 a-table 出错的 一层一层注释之后发现是因为。这个错和本质关系不是很大，循环限制 大概是因为长度不确定。代表超出了ResizeObserver循环限制。
element Plus 报错ResizeObserver loop limit exceeded at eval
qq_43688916的博客
04-12 1630
试了加type=“index” 也试了加min-width都不行。每一个el-table-column固定宽度的话样式太丑不可取。最后终于找到了，在app.vue中加入以下代码即可。刚开始没事 浏览器缩放就出现这个问题。
跳转页面ResizeObserver loop limit exceeded 报错
09-04
对于报错 "ResizeObserver loop limit exceeded"，通常是由于 ResizeObserver 的监听器函数中发生了循环调用导致的。ResizeObserver 是一个用于监听元素大小变化的 API，当元素大小发生变化时会触发监听器函数。 要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值