el-table使用 v-if 时表头与该列值串行/串位问题。el-table表格 v-if 显示 隐藏 样式错乱的问题

注意点:

  • 使用v-show时,无法隐藏表格列,只能使用v-if。

解决办法:

  • 在<el-table-column >标签上添加:key="Math.random()"属性(或者  key="某个唯一值"也可)

如下图:

<!-- 添加一个不重复的key值,即可。如 :key="Math.random()",指定绑定的key值,避免造成渲染错位问题,感觉原理类似 v-for 需绑定 key值类似 -->
<el-table-column label="名称" prop="name" :key="Math.random()" v-if="columns[6].visible" />
<el-table-column label="年龄" prop="age" :key="Math.random()" v-if="columns[7].visible" />
<el-table-column label="地址" prop="addr" :key="Math.random()" v-if="columns[8].visible" />
<el-table-column label="日期" prop="date" :key="Math.random()" v-if="columns[9].visible" />
<!-- 如果有抖动情况,可改为绑定固定值,如下:(绑定number,或绑定字符串) -->
<el-table-column label="名称" prop="name" :key="1" v-if="columns[6].visible" />
<el-table-column label="年龄" prop="age" :key="2" v-if="columns[7].visible" />
<el-table-column label="地址" prop="addr" key="addr" v-if="columns[8].visible" />
<el-table-column label="日期" prop="date" key="date" v-if="columns[9].visible" />

猜你喜欢

转载自blog.csdn.net/Shimeng_1989/article/details/129568480