el-table resize 报错 ResizeObserver loop limit exceeded 解决

新工程尽然遇到这类问题,究其原因—element-ui 自2.3.5版本后,Table-column取消了默认宽度大小,增加了 type参数。。。找了好久终于找到解决方法:

import Vue from 'vue'
import ElementUI,{ Table } from 'element-ui'

// 解决 ElTable 自动宽度高度导致的「ResizeObserver loop limit exceeded」问题
const fixElTableErr = table => {
  const oldResizeListener = table.methods.resizeListener
  table.methods.resizeListener = function () {
    window.requestAnimationFrame(oldResizeListener.bind(this))
  }
}

// 一定要在Vue.use之前执行此函数
fixElTableErr(Table)

Vue.use(ElementUI)

感谢原文链接:

https://devpress.youkuaiyun.com/viewdesign/642bc7fa986c660f3cf933b5.html

### el-tableResizeObserver loop completed with undelivered notifications 的报错原因及解决方案 #### 报错原因 该错误通常发生在使用 `el-table` 或其他基于 DOM 尺寸变化监听的功能时,当浏览器检测到尺寸变化的循环无法完成或者存在未处理的通知时会触发此警告。具体可能的原因如下: 1. **动态高度绑定** 当表格的高度被设置为动态值(例如通过 `v-bind:height` 动态计算),并且其父级容器采用 Flexbox 布局时,可能会由于布局调整引发多次重绘,从而导致 ResizeObserver 循环未能及时结束[^3]。 2. **表头循环渲染问题** 如果在 `el-table-column` 上使用了 `v-for` 渲染多个列,并且没有显式指定每列的宽度,则可能导致表格内部的尺寸计算出现问题,进而触发 ResizeObserver 警告[^1]。 3. **窗口大小变更事件频繁触发** 若项目中有监听全局窗口大小的变化并实时更新表格高度或其他样式属性的操作,也可能引起类似的性能问题和 ResizeObserver 错误[^3]。 --- #### 解决方案 以下是几种常见的解决方法,可根据实际场景选择适用的方式: 1. **固定列宽** 对于使用 `v-for` 动态生成的列,建议为其显式设定固定的宽度(如 `width="130"`)。这样可以减少因自动计算列宽而导致的潜在问题[^1]。 ```html <el-table :data="tableData"> <el-table-column v-for="(item, index) in columnData" :key="index" :prop="'prop' + index" :label="item" width="130"> </el-table-column> </el-table> ``` 2. **优化父容器布局** 如果表格位于一个具有 `flex: 1` 属性的父容器中,尝试在其父容器上添加 `min-width: 0` 或者直接设置 `width: 0` 来避免子元素尺寸变化引起的无限循环重绘问题[^3]。 ```css .parent-container { display: flex; flex-direction: column; height: 100%; min-width: 0; /* 关键 */ } ``` 3. **限制窗口 resize 监听频率** 针对动态调整表格高度的情况,可以通过防抖函数来降低 `window.resize` 事件的触发频率,从而减轻性能压力[^3]。 ```javascript import { debounce } from 'lodash'; const handleResize = () => { this.tableHeight = window.innerHeight - 100; // 计算新的高度 }; mounted() { window.addEventListener('resize', debounce(this.handleResize, 200)); } beforeDestroy() { window.removeEventListener('resize', this.handleResize); } ``` 4. **升级依赖版本** 确保所使用的 VueElement Plus 版本是最新的稳定版,某些旧版本可能存在已知的兼容性或性能问题[^2]。 5. **禁用 ResizeObserver(不推荐)** 在极少数情况下,如果确认 ResizeObserver 不会影响功能实现,可以选择临时屏蔽相关日志输出。但这仅作为调试手段,不应长期使用。 ```javascript console.error = function (message) { if (!message.includes('ResizeObserver')) { originalConsoleError.apply(console, arguments); } }; ``` --- ### 总结 以上方法分别针对不同的根本原因提供了对应的修复策略。优先考虑前三种方式,即固定列宽、优化父容器布局以及限制窗口 resize 监听频率,这些措施能够有效缓解甚至彻底消除 ResizeObserver 循环报警的问题。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值