Vue進階（么伍么）：el-table-column :key應用

引言

在前端專案開發過程中，el-table展示的結果列使用元件形式引入，其中某些欄位通過:formatter方法轉碼，結果欄位的欄位顯示/隱藏控制也使用元件形式引入，前端在控制欄位顯示屬性時，發現碼值轉換及欄位資訊展示均有問題。

問題分析

通過閱讀程式碼結構，發現el-table-column通過template迴圈生成，由於template的作用是模板佔位符，可幫助我們包裹元素，但在迴圈過程當中，template不會被渲染到頁面上。有關表格資料渲染中key的作用如下：

• key作為一個DOM節點的標識值，結合Diff演算法可以實現對節點的複用。(key相同的節點會被複用)；

• 只有當key(或其他導致isSameNode判斷為false)發生改變時，才會觸發節點的重新渲染。否則Vue將會複用之前的節點，通過改變節點的屬性來實現節點的更新。

同時，template標籤不支援:key屬性，

注意： vue例項繫結的元素內部的template標籤不支援v-show指令，即v-show="false"對template標籤來說不起作用。但是此時的template標籤支援v-if、v-else-if、v-else、v-for這些指令。

解決方法

既然template標籤不支援key屬性，可通過在el-table-column標籤加入:key="Math.random()"屬性，這個key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes，依次來提升頁面渲染效能。如果不更新這個key的話,顯示/隱藏列的時候,部分DOM不會重新渲染,導致table變化時候內容錯亂。

擴充閱讀

Vue API

《Vue進階（么肆玖）：Vue中template標籤的使用》

《Vue進階（么伍零）：Vue key屬性詳解》