vue项目开发过程中的一些问题--elementplus 解决改变屏幕大小时el-table报错

问题：elementplus 解决改变屏幕大小时el-table报错

错误信息如下

Uncaught runtime errors: × ERROR ResizeObserver loop completed with undelivered notifications.

at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:308:58)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:327:7)

在开发过程中遇到ResizeObserver在布局变化时过于频繁调用的问题，这影响了开发效率。为了解决这个问题，文章提出了使用window.requestAnimationFrame和debounce函数来限制回调函数的执行频率，将回调延迟200毫秒执行，从而避免频繁弹出报错黑框。在App.vue和main.js中应用这个修改可以有效地解决此问题。

在App.vue/main.js中加入以下这段代码即可解决：

// app.vue写在script里面  main.js写在app挂在完之后
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);
    }
}

参考链接