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++;
  }
}