环境Vue3 Ts
使用了el-table 后,容易出现如下错误
ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)
解决办法
在App.vue 下面加代码
const debounce = (callback: (...args: any[]) => void, delay: number) => {
let tid: any;
return function (...args: any[]) {
const ctx = self;
tid && clearTimeout(tid);
tid = setTimeout(() => {
callback.apply(ctx, args);
}, delay);
};
};
const _ = (window as any).ResizeObserver;
(window as any).ResizeObserver = class ResizeObserver extends _ {
constructor(callback: (...args: any[]) => void) {
callback = debounce(callback, 20);
super(callback);
}
};
},
App.vue 完整代码如下:
<template>
<div id="app">
<router-view />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
setup() {
const debounce = (callback: (...args: any[]) => void, delay: number) => {
let tid: any;
return function (...args: any[]) {
const ctx = self;
tid && clearTimeout(tid);
tid = setTimeout(() => {
callback.apply(ctx, args);
}, delay);
};
};
const _ = (window as any).ResizeObserver;
(window as any).ResizeObserver = class ResizeObserver extends _ {
constructor(callback: (...args: any[]) => void) {
callback = debounce(callback, 20);
super(callback);
}
};
},
});
</script>
<style lang="scss"></style>
为什么??? 我也不清楚原理
ChatGPT 解释如下: