VUE3中，使用ant-design-vue表格滚动报错ResizeObserver loop completed with undelivered notifications.

报错信息：

在VUE3+TS中使用ant-design-vue的表格，设置X轴滚动 :scroll="{ x: true }"或 :scroll="{ x: 1500 }"时。刷新页面时会提示报错：

Compiled with problems:

ERROR

ResizeObserver loop completed with undelivered notifications. at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)

报错原因：

dataSource绑定的数组初始值为空数组，数组有值后会引起组件尺寸的变化。

ResizeObserver在回调中检测到尺寸变化，并试图通知观察者，但是在新的尺寸可见性检测之前，浏览器不能完成所有的回调执行，导致无限循环。

这是一个浏览器内部的警告，通常不会阻止页面的正常操作。

解决办法：

方法一：

在app.vue中添加如下代码

const ignoreErrors = ["ResizeObserver loop completed with undelivered notifications", "ResizeObserver loop limit exceeded"]

window.addEventListener('error', e => {
  let errorMsg = e.message;
  ignoreErrors.forEach(m => {
    if (errorMsg.startsWith(m)) {
      console.error(errorMsg);
      if (e.error) {
        console.error(e.error.stack);
      }
      const resizeObserverErrDiv = document.getElementById(
        'webpack-dev-server-client-overlay-div'
      );
      const resizeObserverErr = document.getElementById(
        'webpack-dev-server-client-overlay'
      );
      if (resizeObserverErr) {
        resizeObserverErr.setAttribute('style', 'display: none');
      }
      if (resizeObserverErrDiv) {
        resizeObserverErrDiv.setAttribute('style', 'display: none');
      }
    }
  })
});

方法会检索出该报错信息，并从样式层面将其隐藏。

方法二：

为dataSource绑定的数组初始值添加一个空对象， [ { } ] 。

让初始值有数据，等表格有数据渲染时，就不会导致尺寸变更，从而消除报错信息。