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值麻烦

你可能感兴趣的:(Vue)