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

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

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

<el-table-column v-if="listQuery.repairState !==  6001501  && listQuery.repairState !==  6001503 " :column-key="String(Math.random())" label="审核意见" header-align="center" align="center" min-width="120">
     <template slot-scope="scope">{{ scope.row.auditAdvice }}</template>
 </el-table-column>

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

   

   

   解决：

   

<template>
  <div class="app-container">
    <div style="backgroundColor: #fff;padding: 10px; borderRadius: 5px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="待提交审批" name="6001501" />
        <el-tab-pane label="待审核" name="6001503" />
        <el-tab-pane label="审核不通过" name="6001504" />
        <el-tab-pane label="审核已通过" name="6001502" />
        <el-tab-pane label="维修中" name="6001505" />
        <el-tab-pane label="完成" name="6001506" />
      </el-tabs>
      <div :key="activeName">
        <List :fquery="fquery" />
      </div>
    </div>
  </div>
</template>

<script>
import waves from  @/directive/waves 
import List from  ./components/list 
export default {
  directives: { waves },
  components: { List },
  data() {
    return {
      activeName:  6001501 ,
      fquery: {
        repairState:  6001501 
      }
    }
  },
  created() {

  },
  methods: {
    handleClick() {
      this.fquery.repairState = this.activeName
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

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

<el-table-column v-if="listQuery.repairState ==  6001501  || listQuery.repairState ==  6001502  || listQuery.repairState ==  6001504 " label="操作" width="100">
    <template slot-scope="scope">
      <span v-if="listQuery.repairState ==  6001501  || listQuery.repairState ==  6001504 " class="v-btn"><el-button size="mini" plain @click="handleEdit(scope)">修改</el-button></span>
      <span v-if="listQuery.repairState ==  6001502 " class="v-btn"><el-button size="mini" plain @click="handleSendRepair(scope)">送修</el-button></span>
    </template>
</el-table-column>

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

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