ResizeObserver loop limit exceeded报错解决方案

发布时间 2023-06-19 15:22:34作者: ╰透在骨子里的小傲娇

ResizeObserver loop limit exceeded报错解决方案

项目接入前端感知系统,采集到很多ResizeObserver loop limit exceeded错误。本地运行不是这个报错信息,当反复拖拽改变窗口大小时,本地运行错误信息如下:

问题原因:element-ui中的table组件的引入

如果在一个动画帧内,ResizeObserver不能处理所有的observations,就会触发这个ResizeObserver loop limit exceeded。

解决方法:

方案1. 阻止table的重绘,例如给所有列都增加width,但是这个方案不好,无法自适应宽度。
方案2. resize时,给回调进行节流,使其1帧内最多执行一次。代码如下:

import ElementUI, {Table} from "element-ui";

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://blog.csdn.net/gudeng007/article/details/125765927