element-ui中的el-table-column使用v-if导致列与数据错乱

当对表格中列根据需求显示隐藏时，发现列对应的数据发生错乱，如下：

image.png

1. 解决方法：
   在 el-table-column 中加入 :column-key="String(Math.random())"

2. 若是子父组件关系，父组件不同条件下，子组件渲染不同表格（不同条件对应不同列显示隐藏）

   
   
   image.png
   
   
   image.png
   
   

   解决：

   
   
   image.png

注：亲测方法二解决更彻底，方法一更适用简单且少的条件判断
eg: 子组件表格组件内部分代码，此多个情况判断，方法二更好解决

原因：
在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的，于是需要添加column-key来做区分！

表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，所以，通过column-key去标识一下当前行是唯一的，不许复用就行了