vue3项目使用了element-plus中的el-table表格组件，缩放浏览器网页时，报错如下： ResizeObserver loop limit exceeded at eval (w

最新推荐文章于 2024-08-06 17:57:29 发布
最新推荐文章于 2024-08-06 17:57:29 发布
阅读量2.4k 收藏 3
点赞数 1
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Snowyya/article/details/130195404
版权
在vue3项目里使用element-plus的el-table组件时，浏览器缩放会导致ResizeObserverlooplimitexceeded错误。问题源于element-ui从2.3.5版本后Table-column不再有默认宽度。设置type参数虽能避免错误，但会固定列宽。为解决这个问题，需要给el-table-column指定默认宽度以确保列宽自适应。
摘要由CSDN通过智能技术生成

错误描述：
vue3项目使用了element-plus中的el-table表格组件，缩放浏览器网页时，报错如下：
ResizeObserver loop limit exceeded
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)
在这里插入图片描述
原因分析：
element-ui 自2.3.5版本后，Table-column取消了默认宽度大小，增加了 type参数，type的可选值有selection/index/expand，每个type对应了一些默认的宽度设置，设置了type不报ResizeObserver loop limit exceeded错误了，但是column的宽度不再自适应均分table的宽度。我在使用el-table组件时，没有给el-table-column默认宽度，也没有使用type.

解决方法：
给el-table-column一个默认宽度
在这里插入图片描述

Snowyya
关注
Vue3 - ResizeObserver loop completed with undelivered notifications（ResizeObserver loop limit excee）
王佳斌
08-15 1万+
vue3 element Plus 表格组件 el-table报错，vue表格el-table浏览器拉伸缩放频繁报错，vue3使用element-plus 表格el-table反复报错出现 ResizeObserver loop limit exceeded错误解决方法，vue3 element plus报错ResizeObserver loop limit exceeded如何解决，element-plus 报错 ResizeObserver loop limit exceeded，vue3+elemen
使用elementui的el-table时，出现错误：ResizeObserver loop limit exceeded
uncle_Huang的博客
03-12 5615
使用elementui的el-table时，出现错误：ResizeObserver loop limit exceeded。 在网上搜到很多解决方法，最后找到了对自己有效的解决办法。 在el-table里加一行这个就行了。 <el-table-column type="index"></el-table-column> ...
vue3 ResizeObserver loop limit exceeded 问题
weixin_52072629的博客
07-17 847
刚刚项目发现一个问题，搜索得知似乎是弹性布局与el-table不断触发元素重绘的问题，记录一下解决方案：vue.config.js添加以下代码。（修改config文件要重启项目！
vue3 ResizeObserver如何监听一个容器盒子div宽度高度发生改变
最新发布
红烧咸咸鱼
08-06 554
vue3 ResizeObserver如何监听一个容器盒子div宽度高度发生改变
【Vue】运行Vue项目时使用element-ui报错：ResizeObserver loop limit exceeded at eval...
赶不上明天的博客
03-24 1万+
vue3项目使用element plus的el-table组件，在切换页面时报错。
解决ResizeObserver loop limit exceeded
yuanchuojian4871的博客
06-23 995
最后我发现，给表格传的数据是异步的，一开始表格接收到数据是undefined。所以给表格传的数据做个判断。数组长度大于0，再赋值。我在用，vue3-element-plus遇到了这个问题。网上好多答案都是在main.js或者App.vue加样式或者表格添加width样式。然后也没解决我的问题。报错提示：ResizeObserver loop limit exceeded。
: ResizeObserver loop limit exceeded
江湖行骗老中医
10-09 1793
项目中遇到这个报错，浏览器控制台不报错，监控平台报错； 错误原因： 由于项目中使用了自定义指令v-adaptive动态修改表格的高，element ui table的 addResizeListener 监听，动态改变table的高，会多次渲染table，导致监控平台报错 错误调试方式： created() { window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, erro...
vue3 - element-plus表格组件el-table实现鼠标拖曳排序功能，vue3 Table表格拖拽排序，表格每行使用鼠标拖动进行排序功能，表格拖拽排序实现（详细示例代码，一键复制开箱即用
高级前端工程师
03-23 3433
vue3，elementPlus，el-table，typescript，表格组件，Table表格，表格拖动排序，表格拖曳排序，鼠标拖拽表格进行排序功能，elementplus表格如何实现拖动每行进行排序操作，表格拖动改变顺序，鼠标拖曳，表格内的数据项拖拽排序，vue3如何实现element-Plus表格组件进行表格内的数据项拖拽排序，列表拖拽排序效果，实现table动态拖拽，鼠标拖着排序，vue3 element Plus 表格拖曳拖动拖拽 排序，el-table拖拽排序实现，表格内容拖拽重新排序，树形表
Vue使用element-plus的table组件报错ResizeObserver loop completed with undelivered notifications.
JackieDYH的博客
06-11 501
ERROR报错ResizeObserver loop completed with undelivered notifications.
vue-response-components-使用ResizeObserver创建响应组件。-Vue.js开发
05-27
vue-response-components使用ResizeObserver创建响应组件。 想法请查看我在ITNEXT安装上的帖子npm install vue-sensitive-c vue-response-components使用ResizeObserver创建响应性组件。 想法看看我在ITNEXT安装上的...
ResizeObserver loop limit exceeded
Silyeclan的博客
04-11 1417
ResizeObserver loop limit exceeded（vue3+elementui-plus el-table在使用动态列时报错）
【elementplus】解决改变屏幕大小时el-table报错ResizeObserver loop limit exceeded
bbt953的博客
07-11 2398
解决改变屏幕大小时el-table报错ResizeObserver loop limit exceeded
ResizeObserver loop limit exceeded 解决
weixin_39621777的博客
05-05 1464
尝试了各种方法，没解决。vue 项目报了个错。
element Plus 报错ResizeObserver loop limit exceeded at eval
qq_43688916的博客
04-12 1527
试了加type=“index” 也试了加min-width都不行。每一个el-table-column固定宽度的话样式太丑不可取。最后终于找到了，在app.vue中加入以下代码即可。刚开始没事 浏览器缩放就出现这个问题。
ResizeObserver loop limit exceeded报错解决方案
热门推荐
白开水的博客
07-13 3万+
​ 公司内部搭建了前端监控系统Sentry，我把一些项目接入进去，一周后发现上报数量最多的事件是ResizeObserver loop limit exceeded。这些事件上报得太多，给Sentry服务造成很大压力，于是研究一番准备解决之。 如果在一个动画帧内，ResizeObserver不能处理所有的observations，就会触发这个。 解决方案 阻止table的重绘，例如给所有列都增加width，但是这个方案不好，无法自适应宽度。 resize时，给回调进行节流，使其1帧内最多执行一
ResizeObserver loop limit exceeded 报错解决——（element ui问题）！！！
m0_49159526的博客
02-08 1万+
最近维护公司的项目，发现一个报错 ResizeObserver loop limit exceeded，这个报错是在公司平台项目监听系统中提示的，而浏览器的console中却没有提示 如果要在本地开发中调试定位这个问题，可以在项目代码里加入一个方法，在控制台中输出这个错误： window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, error) { console.log('错误', erro
解决:Vue中 ResizeObserver loop limit exceeded at eval (webpack-internal:///./node_modules/webpac
hu_666666的博客
05-11 3786
解决的Vue中使用Element-UI提示的报错
ResizeObserver loop limit exceeded vue页面一直报错
cherry_zhang18的博客
04-12 2888
// ignore ResizeObserver loop limit exceeded // this is ok in several scenarios according to // https://github.com/WICG/resize-observer/issues/38 export function ignoreLoopLimit() { const e = window.onerror window.onerror = function(err) { if (err.
vue3 ts项目中 element-plus 报错 ResizeObserver loop limit exceeded 解决
08-09
通常，当使用Element Plus的Table组件时，报错"ResizeObserver loop limit exceeded"是由于ResizeObserver被触发了过多的次数而导致的。这个问题可以通过对ResizeObserver进行优化来解决。 根据提供的引用内容，可以尝试在代码中添加一个函数debounce来减少ResizeObserver的触发次数。这个函数会延迟执行回调函数，以确保在短时间内多次触发ResizeObserver时，只有最后一次触发会被执行。 你可以将下面这段代码添加到你的app.vue或者main.js中： ```javascript const debounce = (fn, delay) => { let timer = null; return function () { let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); } } const _ResizeObserver = window.ResizeObserver; window.ResizeObserver = class ResizeObserver extends _ResizeObserver{ constructor(callback) { callback = debounce(callback, 16); super(callback); } } ``` 这段代码会对ResizeObserver进行封装，使用debounce函数对回调函数进行了延迟执行。这样就可以减少ResizeObserver的触发次数，避免"ResizeObserver loop limit exceeded"报错的出现。 希望这个解决方案能够帮助到你。如果问题仍然存在，请提供更多的信息，以便我可以提供更准确的解答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值