【VUE3 疑难杂症】使用 elementplus 报错：ResizeObserver loop completed with undelivered notifications.

总览

1.问题根源
2.解决办法（总共有3个，为不同需求人群准备！）

一、问题根源

1.你是否在代码中使用了 el-table 组件？

这个问题的根源在于，elementplus 中，移除了默认宽度，所以你如果要使用 el-table，就必须添加 width=“xxx”
不添加？不添加就等着报错吧宝贝。

示例：
请看，在这个行中，我没有设置 width=“xxx”，

那么如果页面宽度发生变化，就会报错！
根本就不需要花里胡哨地修改什么 main.ts、app.vue，除非你不是 el-table 而是 el-dialog 之类引发的错误。

二、如何解决

方法1：设置固定的 width=“xxx”

就这么简单！
如果你不想设置 width，想要让它 auto，那么接下来我会讲另外一个骚操作，彻底 “解决” 这个问题。

方法2（最为推荐）：如果你不想设置 width 为一个固定值，而是想要它是 auto

在根目录下面创建一个 vue.config.js 的 js 文件，如图所示：

在里面添加内容 （这段代码的意义是，直接禁止全屏运行时报错出现，非常非常暴力，但管用。报错没有消失，而是被我们隐藏了）：

module.exports = {
    devServer: {
        client: {
            overlay: false,
        },
    },
};复制

方法3：影响性能的解决方式，重写 ResizeObserver 方法，不报错，但有卡顿感

在 App.vue 文件中的 script 部分添加如下代码（100 是防止抖动的延迟毫秒）：

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, 100);
    super(callback);
  }
}复制

4.问题解决了，页面变化也不会报错了 ↓

左侧 menu 展开，右侧 router-view 被挤压的状态：

左侧 menu 关闭，右侧 router-view 恢复的状态：