elementplus中表格报错 ResizeObserver loop completed with undelivered notifications.
时间: 2023-11-14 15:07:56 浏览: 217
这个错误通常是由于在表格组件中使用了 ResizeObserver 导致的。这个问题可以通过在表格组件外部包裹一个 div 并设置其 overflow 属性为 auto 来解决。具体做法如下:
```html
<div style="overflow: auto;">
<el-table :data="tableData">
<!-- 表格内容 -->
</el-table>
</div>
```
相关问题
vue报错ResizeObserver loop completed with undelivered notifications.
这个错误通常是由于使用 ResizeObserver 监听元素尺寸变化时,出现了循环调用的情况。这可能是由于在回调函数中修改了元素的尺寸,导致 ResizeObserver 不断地触发回调函数,从而形成了循环调用。解决这个问题的方法是在回调函数中避免修改元素的尺寸,或者使用 debounce 或 throttle 函数来限制回调函数的执行频率。此外,还可以考虑使用其他的尺寸监听方式,比如监听 window 的 resize 事件或者使用 CSS 的 media query。
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中使用防抖函数解决这个问题:
```javascript
// 在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"错误。
阅读全文