Vue 解決 Element-ui 多級表頭 切換列的顯示 造成的渲染問題

問題： 有一個列表，可以切換顯示表格的列，用戶勾選則顯示，否則不顯示，在切換的時候，多級表頭發生渲染問題。

解決思路： 切換顯示列是通過v-if來切換是否渲染列而不是重新渲染整個表格，這樣就會造成表格對於列的初始化計算步驟沒有被執行，從而導致渲染異常

解決：
問題是表格計算列的步驟沒有被重新執行所以每次切換列的渲染的時候也重新渲染表格即可。

代碼思路：
通過watch監聽切換顯示列的變量，觸發更新表格的渲染即可
在Vue中觸發組件重新銷毀再渲染，有兩種方式：

1. 組件上綁定key屬性，更新key就會觸發
2. 通過v-if 搭配 $nextTick 錯開渲染期，先false再在nextTick二次渲染期時置回true，即可實現銷毀 -> 渲染

<el-table :key="tableRefresh"></el-table>

data() {
  return {
    tableRefresh: 0,
  }
},
watch: {
  showColumn() {
     this.tableRefresh++;
  }
}