报错: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 组件时不会出现报错。