el-table根据条件显示列

产品原型：根据不同的条件，需要对表格的列，做判断显示隐藏。

具体要求是有两个tab，切换tab的时候，里面的table列会变化。这里我两个tab用的是同一个table，图片如下：模式和发布时间列是一样的，其他列不同的tab显示不同。

首先，我使用的是v-show，最后发现并没有什么效果。

为什么呢？因为v-show的本质是给dom元素去设置display:none 。但是e-table的表格里面的td设置的display:table-cell ，而且权限层级高于display:none，因此使用v-show在这里不会有效果。

经过查资料发现，vue实例绑定元素内部的这个template标签，它是不支持v-show指令的，也就是说v-show="false"，这个对template标签来说不起作用。但是，发现template标签是支持v-if、v-else-if、v-else、v-for等这些指令的。而且，template标签也不支持key属性

然后，我又使用v-if，我以为应该可以了吧。然并卵，我发现是可以隐藏列了，但是点击切换表格的时候，列的顺序会错乱，不是自己想要的第一列、第二列.......，按顺序显示的列。

最后，经过一番努力，终于知道我应该给el-table,设置一个key属性，这个问题就完美解决。

具体怎么设置呢？

方法1：

<el-table  ref="table"  :key="tableKey">

data() {

    return {

      tableKey: '',

    }

}

methods方法：

handleTabsClick(tab, event) {

      // 每次切换tab的时候，改变tableKey的值

      this.tableKey = new Date()+'' // 解决切换tab表格列渲染错乱问题

}

方法2：

同时，网上也有朋友这样说。但是需要对表格的每行设置一个这样的参数。

 个人使用的是第一种。