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

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

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

// app.vue写在script里面  main.js写在app挂在完之后
const debounce = (fn, delay) => {
  let timer
   return (...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',
  }
];