当前位置：首页 > news >正文

【element plus】解决报错error：ResizeObserver loop limit exceeded的问题

news 2025/7/12 23:25:02

当我们在使用element plus框架时，有时会遇到屏幕突然变暗，然后来一句莫名其妙的报错ResizeObserver loop limit exceeded，其实这是因为改变屏幕大小时el-table导致的报错
网上给出了几种解决方案，我试了其中两种可以实现

方案一：
在App.vue/main.js中加入以下这段代码即可解决：

// app.vue写在script里面  main.js写在app挂在完之后
const debounce = (fn, delay) => {let timerreturn (...args) => {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {fn(...args)}, delay)}
}const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{constructor(callback) {callback = debounce(callback, 200);super(callback);}
}

方案二：
使用 v-if 延迟渲染
如果表格在初始加载时不需要立即显示所有数据，可以使用 v-if 来控制表格的渲染时机。例如，在数据加载完成后再渲染表格。

<el-table v-if="dataLoaded" :data="tableData" ref="myTable"><!-- columns -->
</el-table>data() {return {dataLoaded: false,tableData: []};
},
methods: {loadData() {// 模拟数据加载setTimeout(() => {this.tableData = [/* 数据 */];this.dataLoaded = true;}, 1000);}
}

方案三：
给表格的所有列设置固定宽度，此方案虽缺乏灵活性，但可以解决前面两种存在页面因尺寸变化而导致的闪切问题

const columns = [{title: '工号',colAttrs: { width: 160 }, // 重点dataIndex: 'employeeNumber',},{title: '姓名',colAttrs: { width: 160 }, // 重点dataIndex: 'userFullName',},{title: '职位',colAttrs: { width: 800 }, // 重点dataIndex: 'positionName',}
];