問題描述

在使用el-table組件時，我們有時需要根據用戶的操作動態地添加或刪除一些固定列，例如操作列或選擇列。但是，當我們使用v-if指令來控制固定列的顯示或隱藏時，可能會出現表格的行錯位的問題，即固定列和非固定列的行高度不一致，導致表格的布局混亂。例如，下面的代碼是一個簡單的表格，其中有一個固定在右側的操作列，該列的顯示或隱藏由visremove變量控制：

<el-table-column fixed="right" label="操作" width="120" v-if="!visremove"><div class="item" slot-scope="scope"><el-popconfirm confirm-button-text='好的' cancel-button-text='取消' icon="el-icon-info" icon-color="red"title="確定刪除嗎？" @confirm="removerow(scope.row)"><el-button slot="reference" type="text" size="small">刪除</el-button></el-popconfirm></div>
</el-table-column>

當我們切換visremove的值時，可能會出現如下圖所示的行錯位的問題：

問題原因

出現這種問題的原因可能有多種，例如：

• 固定列和非固定列的寬度不一致，導致表格的總寬度超過了容器的寬度，出現了橫向滾動條，影響了表格的高度計算。
• 固定列和非固定列的內容不一致，導致表格的行高度不一致，影響了表格的對齊。
• 表格的數據或列發生變化時，表格的dom沒有及時更新，導致表格的布局不正確。

問題解決

針對上述的問題原因，我們可以采取以下的一些解決方案：

• 調整表格的寬度，使其適應容器的寬度，避免出現橫向滾動條。
• 調整表格的行高度，使其一致，避免出現高度不匹配的情況。
• 調用表格的doLayout方法，對表格的dom進行重新渲染，更新表格的布局。

其中，針對本文添加dom觸發bug的條件，有效的方法是使用doLayout方法，該方法可以在表格的數據或列發生變化時，對表格的dom進行重新渲染，更新表格的布局。我們可以在切換固定列的顯示或隱藏的方法中，添加表格的刷新方法，例如：

switchvisremove() {this.visremove = !this.visremove;// 調用doLayout方法對表格dom重新渲染// el-table加ref="multipleTable"this.$nextTick(() => {this.$refs.multipleTable.doLayout();});}

這樣，當我們切換visremove的值時，表格的行錯位的問題就可以得到解決，如下圖所示：