element el-table-column使用v-if导致列

当我代码中的el-table写成这样时，会出现列与对应数据错乱

<el-table-column label="店铺地址" prop="address" align="center" v-if="tabIndex !== '2'"/>
<el-table-column label="申请来源" prop="applicationSource" align="center" v-if="tabIndex === '2'"/>
<el-table-column label="入驻小区" prop="communityName" align="center" />
<el-table-column label="联系方式" prop="mobile" align="center" v-if="tabIndex === '0'" />
<el-table-column label="状态" align="center" v-if="tabIndex === '1'">
  <template slot-scope="scope">
    <div>{{ scope.row.result === 0 ? '待审核' : scope.row.result === 1 ? '通过' : '拒绝' }}</div>
  </template>
</el-table-column>

image.png

后来我搜索到了el-table的列其实也是基础循环出来的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，所以给每一个列加了一个特定的key，确定了这几个列的唯一性，就没有问题喽！！

代码如下：

image.png