Using the el-table component, keep reporting ResizeObserver loop limit exceeded errors

problem description

using the el-table component, keep reporting js error: ResizeObserver loop limit exceeded errors

the environmental background of the problems and what methods you have tried

related codes

<el-table
    :data="tableData"
    :resizable="false"
    border
    style="width: 100%" >
    <template v-for="(item, index) in config.tableHeaders">
        <el-table-column  :key="index"
            :prop="item.key"
            :label="item.label"
            header-align="center">
        </el-table-column>
    </template>
</el-table>


window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, error) {
    console.log(errorMessage);
};

what result do you expect? What is the error message actually seen?

// 
ResizeObserver loop limit exceeded
Apr.20,2021

element-ui since version 2.3.5, Table-column cancels the default width size and increases the type parameter. The optional values of type include some default width settings corresponding to each type of selection/index/expand, and type is set not to report ResizeObserver loop limit exceeded errors, but the width of column is no longer adaptively evenly divided into the width of table, but can only write the width of width. This is very bad, very ugly ~


.

https://stackoverflow.com/que.

this error will be reported after upgrading the chrome64 version, which can be ignored; this is a reminder that all observers, in a single frame animation will not cause the program to break

clipboard.png


Custom ignore reporting this error is good, temporarily cannot avoid


I also encountered this problem, the page refresh will be triggered countless times, has now been solved.
I use the reason for this error in vue,: the min-width attribute is set in the el-table-column in the menu of el-table. It is found that in the mounted hook of vue, there are statements that manually trigger the size style modification of an element in the el-table component, such as
const wrapper = document.getElementsByClassName ('el-table__body-wrapper') [0];
wrapper.style.maxHeight = overHg;
as a result, when the page is rendered, the min-width of the el-table component calculates the element size, which acts at the same time as this statement, and the element size is constantly calculated, resulting in a conflict.
the solution is to modify the maxHeight after mounted

Menu