element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题

描述：

在el-table中使用v-if控制某些列的显示或者隐藏，当activeIndex数据发生改变时，下面这种写法会导致表格的列位置错乱

<el-table-column label="商品id" ></el-table-column>
<el-table-column label="商品转态" v-if="activeIndex === '1'" ></el-table-column>
<el-table-column label="服务费" v-if="activeIndex === '2'" ></el-table-column>

解决：

方法一：

<el-table-column label="商品id" :key="Math.random()"></el-table-column>
<el-table-column label="商品转态" v-if="activeIndex === '1'" :key="Math.random()"></el-table-column>
<el-table-column label="服务费" v-if="activeIndex === '2'" :key="Math.random()"></el-table-column>

方法2：

<el-table-column label="商品id" key="0"></el-table-column>
<el-table-column label="商品转态" v-if="activeIndex === '1'" key="1"></el-table-column>
<el-table-column label="服务费" v-if="activeIndex === '2'" key="2"></el-table-column>

总结：

其实两种方法都是给所有列加了key值
第一种方法好在key值是随机数，添加列或者修改列顺序时,写上:key=Math.random()就行，但是渲染时列表会出现一瞬间的晃动
第二种不会出现晃动的瑕疵，但是修改key值麻烦