a-table使用 scroll属性是报错Uncaught ResizeObserver loop completed with undelivered notifications.
时间: 2025-02-11 13:16:10 浏览: 87
### 解决 a-table 使用 `scroll` 属性时出现 Uncaught ResizeObserver 错误
当使用 Ant Design 的 `a-table` 组件并设置 `scroll` 属性时,可能会遇到 `Uncaught ResizeObserver loop completed with undelivered notifications` 错误。此错误通常发生在浏览器尝试处理大量的尺寸变化通知而未能及时完成。
为了有效解决这个问题,可以采取以下几种方法:
#### 方法一:调整 CSS 隐藏报错浮层
通过自定义样式来隐藏由 Webpack Dev Server 客户端产生的错误覆盖层,从而避免影响用户体验。可以在项目的全局样式文件中添加如下代码[^1]:
```css
/* 隐藏 webpack dev server 报错浮层 */
#webpack-dev-server-client-overlay {
display: none !important;
}
```
这种方法不会真正修复底层问题,而是掩盖了视觉上的干扰。
#### 方法二:优化表格结构减少重绘次数
确保表格内部的内容尽可能简化,移除不必要的嵌套或复杂的渲染逻辑,这有助于降低触发 ResizeObserver 的频率。对于大型数据集,考虑分页显示或者虚拟滚动技术以提高性能。
#### 方法三:升级依赖库版本
确认所使用的 antd 版本是最新的稳定版,因为开发者可能已经在后续更新中解决了该 bug。可以通过 npm 或 yarn 升级到最新版本:
```bash
npm install antd@latest
# 或者
yarn add antd@latest
```
如果上述措施仍无法解决问题,则建议查看是否有其他第三方插件或框架与当前环境存在兼容性冲突,并适当调整配置参数。
#### 方法四:禁用 ResizeObserver (谨慎操作)
作为最后的选择,在不影响应用功能的前提下,可以选择临时禁用 ResizeObserver API 来绕过这一问题。但这并不是推荐的做法,因为它会破坏一些基于窗口大小改变的功能特性。
阅读全文
相关推荐


















