最近在一個老項目中發現一個問題,el-table使用時,不斷觸發元素重繪,系統的錯誤監聽系統監聽到無數個ResizeObserver loop limit exceeded 錯誤
這個錯誤是在監聽系統中看到的,可能瀏覽器console不會報錯,如果要在本地開發中調試定位這個問題,可以在項目代碼里加入一個方法,打印window錯誤:
window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, error) {
console.log('錯誤', errorMessage);
};
網上也提到可能是el-table的問題。最後定位到,el-table下的各列設置了min-width屬性,我們知道這個屬性在頁面寬度不夠時,element會根據各列設置的min-width,按比例計算寬度。而檢查發現,項目代碼裏,在mounted鉤子裏有修改el-table內元素寬高的代碼(可能是舊業務邏輯)
const overHg = document.getElementsByClassName('el-table__body')[0].clientHeight + 'px';
const wrapper = document.getElementsByClassName('el-table__body-wrapper')[0];
wrapper.style.maxHeight = overHg;