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

文章目录

问题描述

根据需求,当某一项列数据根据某属性等显示隐藏该列,使用v-if进行隐藏后,发现会有随机列位置错乱与数据错乱现象

原因

这是因为在v-for或者v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况。
而原本这些标签每一个都是独立的,于是需要添加key来做区分!
表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,这就是问题所在,所以,通过key去标识一下当前行是唯一的,不许复用,列唯一,就可以解决

解决

给列加key值

<el-table-column
 :key="1"
>
</el-table-column>

猜你喜欢

转载自blog.csdn.net/liqiannan8023/article/details/130723506