报错：ResizeObserver loop limit exceeded的处理方法（学习自用）

yayaye717

于 2024-06-09 00:20:23 发布

阅读量320

点赞数 9

文章标签：学习

本文链接：https://blog.csdn.net/yayaye717/article/details/139553330

版权

报错：ResizeObserver loop limit exceeded

处理方法:

在main.js添加：

//从elementui中引出Table
import ElementUI,{Table} from 'element-ui'
//处理table宽度报错的问题
const fixElTableErr = table => {
  const oldResizeListener = table.methods.resizeListener
  table.methods.resizeListener = function () {
    window.requestAnimationFrame(oldResizeListener.bind(this))
  }
}

// 必须在Vue.use之前执行此函数
fixElTableErr(Table)

import ElementUI, { Table } from 'element-ui'：这行代码从 Element UI 库中引入了 Element UI 的整个库（作为 ElementUI 对象）以及 Table 组件。这样可以在代码中使用 Element UI 的组件和功能。
const fixElTableErr = table => { ... }：这是一个函数 fixElTableErr，用于处理 Table 组件宽度调整时的报错问题。在这个函数中，通过重写 Table 组件的 resizeListener 方法来解决宽度调整的报错。
table.methods.resizeListener = function () { ... }：在这段代码中，重写了 Table 组件的 resizeListener 方法，使用 window.requestAnimationFrame 来调用原始的 resizeListener 方法，以解决宽度调整时的报错问题。
fixElTableErr(Table)：这行代码调用了 fixElTableErr 函数，并将 Table 组件作为参数传入。这样可以在 Vue 实例中使用 Element UI 的 Table 组件时，先执行这个函数来处理宽度调整的报错问题。fixElTableErr(Table) 函数需要在调用 Vue.use(ElementUI) 之前执行，以确保在使用 Element UI 的 Table 组件之前处理宽度调整的报错问题。

这段代码是为解决 Element UI 中 Table 组件宽度调整报错问题而编写的通用代码。通过重写 Table 组件的 resizeListener 方法，使用 window.requestAnimationFrame 来处理宽度调整，以解决可能出现的报错情况。这段代码可以在使用 Element UI 的项目中通用地处理 Table 组件的宽度调整问题，确保在 Vue 实例中正常使用 Element UI 的 Table 组件时不会出现报错。