el-table__empty-block Uncaught ResizeObserver loop completed with undelivered notifications.

### 关于 `el-table__empty-block` 和 `ResizeObserver` 循环未交付通知问题 当遇到 `el-table__empty-table` 导致的 `ResizeObserver loop completed with undelivered notifications` 问题时，通常是因为浏览器中的 `ResizeObserver` API 在处理某些特定场景下的尺寸变化检测时出现了性能瓶颈或逻辑冲突。以下是可能的原因以及解决方案： #### 可能原因分析 1. **频繁触发重绘** 如果表格数据为空或者动态更新频率较高，则可能导致 `ResizeObserver` 频繁监听到尺寸的变化并尝试重新计算布局[^2]。 2. **空状态占位符的影响** 当 `el-table` 的内容为空时，会渲染一个名为 `el-table__empty-block` 的 DOM 节点作为占位符。如果该节点的样式设置不当（例如高度、宽度不固定），可能会引发额外的重绘操作，从而影响 `ResizeObserver` 的正常工作[^3]。 3. **浏览器兼容性和实现差异** 不同浏览器对 `ResizeObserver` 的支持程度不同，在极端情况下可能出现未能及时传递的通知现象[^4]。 --- #### 解决方案 ##### 方法一：优化 `el-table__empty-block` 样式 通过显式定义 `el-table__empty-block` 的宽高来减少不必要的重绘行为。 ```css .el-table__empty-block { width: 100%; height: auto; /* 或者指定具体数值 */ } ``` ##### 方法二：限制 ResizeObserver 使用范围 可以通过自定义配置禁用部分组件内的 `ResizeObserver` 功能。对于 Element Plus 表格组件而言，可以考虑覆盖默认的行为： ```javascript import { ElTable } from 'element-plus'; // 自定义扩展 Table 组件以移除 ResizeObserver const CustomElTable = { extends: ElTable, mounted() { this.$nextTick(() => { const observerInstances = Array.from( window.document.querySelectorAll('.el-table') ).map((table) => table.__resizeListeners__.forEach((listener) => listener.disconnect()) ); }); }, }; export default CustomElTable; ``` ##### 方法三：升级依赖库版本 确保使用的 Vue.js 版本及其生态插件均为最新稳定版。旧版本可能存在已知 bug 影响 `ResizeObserver` 正常运行[^5]。 ##### 方法四：降级 ResizeObserver 实现方式 在项目中引入 polyfill 替代原生 `ResizeObserver` ，比如 [`resize-observer-polyfill`](https://github.com/juggle/resize-observer)，它提供了更稳定的跨平台表现。 ```bash npm install resize-observer-polyfill --save ``` 随后全局注册此工具替代原有机制即可。 --- ### 总结 上述方法分别针对样式调整、事件解绑、环境适配等方面提出了改进措施。实际应用过程中可根据具体情况选择合适的策略组合实施修复。