elementplus 发布出现ResizeObserver loop completed with undelivered notifications.

这个错误通常是由于使用了 ResizeObserver API 导致的，它会在元素大小发生变化时触发回调函数，但是如果在回调函数中修改了元素的大小，就会导致循环调用，最终抛出该错误。
解决方法是在回调函数中避免修改元素的大小，或者使用 debounce 或 throttle 函数来限制回调函数的执行频率。

相关问题

elementplus中表格报错 ResizeObserver loop completed with undelivered notifications.

这个错误通常是由于在表格组件中使用了 ResizeObserver 导致的。这个问题可以通过在表格组件外部包裹一个 div 并设置其 overflow 属性为 auto 来解决。具体做法如下：
<div style="overflow: auto;">
<el-table :data="tableData">
<!-- 表格内容 -->
</el-table>
</div>

elementPlus弹窗报错Uncaught ResizeObserver loop completed with undelivered notifications.

ElementPlus 弹窗中 ResizeObserver 错误解决方案
当遇到 ResizeObserver loop completed with undelivered notifications 的错误时，这通常是由于频繁触发的重排（reflow）或重绘（repaint）事件引起的[^3]。为了有效解决这个问题，在 Vue 项目中可以通过修改全局的 window.ResizeObserver 来实现。
通过引入防抖机制来减少不必要的回调调用频率，可以有效地缓解这一问题。具体做法是在项目的入口文件或者主要组件如 App.vue 中覆盖默认的 ResizeObserver 实现：
const debounce = (fn, delay) => {
let timer;
return (...args) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn(...args);
}, delay);
};
};

// 覆盖原始的 ResizeObserver 类
const _ResizeObserver = window.ResizeObserver;

window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
constructor(callback) {
// 使用防抖后的回调替代原生回调
callback = debounce(callback, 100);
super(callback);
}
};

上述代码片段展示了如何利用 JavaScript 的类继承特性以及简单的防抖逻辑来优化 ResizeObserver 行为，从而避免因快速连续的变化而导致性能瓶颈和警告信息的发生[^2]。
对于特定于 Element Plus 组件的情况，如果仅希望针对某些弹窗或其他 UI 控件应用此修正，则可以在相应组件初始化之前执行这段脚本，确保自定义版本的 ResizeObserver 已经生效再加载相关依赖项。
此外，也可以考虑升级到最新版的 Element Plus 和浏览器版本，因为开发者社区可能会已经修复了一些已知的问题并提高了兼容性和稳定性[^4]。