Uncaught runtime errors:×ERRORResizeObserver loop completed with undelivered notifications.

最新推荐文章于 2025-10-12 22:23:20 发布

转载最新推荐文章于 2025-10-12 22:23:20 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.cn/post/7446378095534637108

文章标签：

#vue.js #elementui #前端

vue3项目引入了element-plus组件库，当前页面主要用到了表格组件(el-table)，但是窗口大小变化时会报错，报错信息：ResizeObserver loop completed with undelivered notifications。报错图片如下：

在网上查了一下，当窗口大小变化时el-table会自适应窗口大小，它的底层应该是调用了ResizeObserver这个函数。开发过程中遇到ResizeObserver在布局变化时过于频繁调用的问题，这影响了开发效率。为了解决这个问题可以在App.vue中的script中加入如下代码：

const debounce = (fn, delay) => {
    let timer
    return (...args) => {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
    constructor(callback) {
        callback = debounce(callback, 200);
        super(callback);
    }
}