Elementui el-table踩坑筆記-動態列異常

在Elementui中，el-table的width，height屬性設為100%，那么el-table會占滿其父元素的寬高。如果表格實際展示寬高超過，會出現滾動條。

天啦嚕，這是什么情況，怎么會表現不一致了呢？怎么會左表的滾動條跑到上面來了？這兩個的差異就只有下圖的，有個列的顯隱，難道是這個的問題？

於是把該三段內容去掉試試，表現正常顯示。但是該問題是怎么產生的，是因為渲染問題導致的嗎？那好，doLayout試試，但是並沒有用。那好直接放大招，加索引，讓它重新加載。這樣實現的原因是表格加載屬於懶加載，所以切換表頭的時候，讓表格重新加載一次。於是在表格添加了 :key="tableNormalCheckKey"。然后在watch監聽數據變動進行索引值調整

 let tableNormalCheckKey = new Date(
          $.ajax({
            type: "HEAD",
            async: false,
            cache: false,
          }).getResponseHeader("Date")
        ).getTime() + parseInt(Math.random() * 2000);
        _this.tableNormalCheckKey=tableNormalCheckKey;

至此，解決。

 

 備注：動態列這個問題隱藏了很多坑，比如遇到錯位或不刷新，可以嘗試以此方法解決。