之前使用element table 時遇到的一個問題，因為篩選項過多，所以把篩選項做成了一個固定在右邊的篩選器，可以關閉，在關閉這個篩選的div時，table 的最后一列會渲染不上，當我們縮放瀏覽器時就會渲染上，遇到這個問題想別人請教，使用vue的key屬性，SearchDrawer是控制我右邊篩選器的顯示還是隱藏的的model，加上這個key屬性就解決了這個渲染問題
:key="'js'+SearchDrawer"
我們的樣式是這樣，search框關閉時左邊的表格就會變大
使用這個：key屬性時，SearchDrawer變化就會觸發節點進行渲染
具體可參考博客
https://blog.csdn.net/sunhuaqiang1/article/details/111029386
博客內容下文也可查看
引言
在前端項目開發過程中，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應用》
《Vue進階（幺伍幺）：Vue 應用key提升頁面渲染性能》
————————————————
版權聲明：本文為CSDN博主「No Silver Bullet」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/sunhuaqiang1/article/details/111029386