el-table中設置fixed固定列之后錯位的奇葩原因

場景

ElementUI中el-table設置指定列固定不動,不受滾動條影響：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108141038

給el-table設置fixed屬性之后就可以使該列固定不動。

但是出現了錯位的情況，每一行不對應。

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、按照網上的解決方案以及官方文檔的說明

table在數據請求后，渲染異常的問題，解決辦法就是讓table重新布局。

官方提供了doLayout方法。

 

 

按照這個方法在請求得到數據的時候，用nextTick對table的DOM重新渲染。

 this.$nextTick(() => {
        this.$refs.multipleTable.doLayout();

        // el-table加ref="multipleTable"
      });

試了下不生效，說明是別的問題。

2、 查看了表格中的最后一列

 

 

 

發現該列的寬度設置的較低，內存已經越出，導致每行錯位。將該列的寬度調寬。

 

 

 

恢復正常。