首页vue2的el-table使用max-height报错Uncaught ResizeObserver loop completed with undelivered notifications.

vue2的el-table使用max-height报错Uncaught ResizeObserver loop completed with undelivered notifications.

时间: 2025-02-13 13:19:25 浏览: 43

### Vue2 中使用 Element UI 的 `el-table` 组件时设置 `max-height` 属性导致的 ResizeObserver 错误当在 Vue2 项目中使用 Element UI 的 `el-table` 并设置了 `max-height` 属性后遇到 "ResizeObserver loop completed with undelivered notifications" 这样的错误，这通常是由于浏览器中的 ResizeObserver API 处理大量重排或重绘事件所引起的[^2]。一种有效的解决策略是在循环创建列的情况下为每列指定固定宽度。例如： ```html <template> <el-table :data="tableData"> <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop" :label="item.label" width="130"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ // 数据源... ], columns: [ { prop: 'date', label: '日期' }, { prop: 'name', label: '姓名' } // 更多列定义... ] }; } }; </script> ``` 此外，对于开发环境中频繁出现此类警告的情况，可以通过修改 Webpack 配置来隐藏这些非致命性的控制台消息。具体做法是调整 `vue.config.js` 文件内的配置选项如下所示[^3]: ```javascript // vue.config.js module.exports = { devServer: { client: { overlay: false, }, }, } ``` 通过上述两种方法之一或者组合应用，应该能够有效减少甚至消除该类 ResizeObserver 警告信息的发生频率。

阅读全文