vue3中使用anrd表格报错ResizeObserver loop completed with undelivered notifications.

在vue3中使用anrd表格报错"ResizeObserver loop completed with undelivered notifications"是由于ResizeObserver循环触发导致的。这个错误通常发生在表格组件中，当表格的大小发生变化时，ResizeObserver会不断触发回调函数，但是由于某些原因导致回调函数无法及时处理完毕，从而引发了这个错误。

解决这个问题的方法是使用防抖函数对ResizeObserver的回调函数进行包装。防抖函数可以延迟回调函数的执行，确保在一段时间内只执行一次。这样可以避免回调函数被频繁触发，从而解决了"ResizeObserver loop completed with undelivered notifications"错误。

以下是一个示例代码，演示了如何在vue3中使用防抖函数解决这个问题：

// 在main.js中引入防抖函数
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 在app.vue中使用防抖函数包装ResizeObserver的回调函数
const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  }
}

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

app.mount('#app')

通过以上代码，我们将ResizeObserver的回调函数使用防抖函数进行包装，延迟执行时间设置为16毫秒。这样就能够解决"ResizeObserver loop completed with undelivered notifications"错误。