解决报错: ResizeObserver loop comple

源代码:

<template>
    <el-row :gutter="40">
        <el-col :span="2"></el-col>
        <el-col :span="16" class="aaaa">
            <el-input placeholder="请输入搜索用例或关键字" v-model="search_value">

                <template #prepend>
                    <el-select placeholder="Select" style="width: 150px" v-model="selectedValue">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </template>

                <template #append>
                    <el-button> <el-icon>
                            <Search />
                        </el-icon> </el-button>
                </template>
            </el-input>
        </el-col>

        <el-col :span="2" class="aaaa"></el-col>
        <el-col :span="4" class="aaaa">
            <el-button type="primary" @click="AddTestCase">
                <el-icon :color="color">
                    <Plus />
                </el-icon>
                <span>添加用例</span>
            </el-button>

        </el-col>

    </el-row>

    <el-table :data="tableData" stripe>
        <el-table-column prop="index" label="Index" />
        <el-table-column prop="module" label="TestModule" />
        <el-table-column prop="case" label="TestCase" />
        <el-table-column prop="operation" label="Operation">
            <el-button type="primary" plain>编辑</el-button>
            <el-button type="danger" plain>删除</el-button>
        </el-table-column>
    </el-table>


    <el-dialog v-model="popAdd" title="添加用例">
        <Addcase></Addcase>
    </el-dialog>
</template>

问题现象

调整浏览器界面的时候抛出异常,

问题确认

1. 按模块注释,然后调整浏览器大小
2. 确认el-table引起的.

解决方法

在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);
     }
  }

方案来源: https://blog.csdn.net/bbt953/article/details/131658012