el-table反覆報錯:ResizeObserver loop limit exceeded 解決辦法

最近在一個老項目中發現一個問題,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;
由於el-table的min-width屬性和此代碼同時作用於table組件造成衝突,dom元素不斷重繪,因此報錯ResizeObserver loop limit exceeded : 超出ResizeObserver循環限制
解決辦法是將此語句放在mounted之後執行即可
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章