elementplus中表格报错 ResizeObserver loop completed with undelivered notifications.
时间: 2023-11-14 08:07:56 浏览: 271
这个错误通常是由于在表格组件中使用了 ResizeObserver 导致的。这个问题可以通过在表格组件外部包裹一个 div 并设置其 overflow 属性为 auto 来解决。具体做法如下:
```html
<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` 实现:
```javascript
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]。
vue报错ResizeObserver loop completed with undelivered notifications.
这个错误通常是由于使用 ResizeObserver 监听元素尺寸变化时,出现了循环调用的情况。这可能是由于在回调函数中修改了元素的尺寸,导致 ResizeObserver 不断地触发回调函数,从而形成了循环调用。解决这个问题的方法是在回调函数中避免修改元素的尺寸,或者使用 debounce 或 throttle 函数来限制回调函数的执行频率。此外,还可以考虑使用其他的尺寸监听方式,比如监听 window 的 resize 事件或者使用 CSS 的 media query。
阅读全文
相关推荐
















