element-ui中的el-table-column使用v-if导致列位置与数据错乱

描述

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

element-ui中的el-table-column使用v-if导致列位置与数据错乱_第1张图片

原因

经查询资料发现, 这是因为在v-for或者v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的,于是需要添加key来做区分!

表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,这就是问题所在,所以,通过key去标识一下当前行是唯一的,不许复用,就行了。

修改:

<el-table-column v-if="detailData.settlement_type === 3" :key="Math.random()" label="结转下月金额111" prop="latestBalance" min-width="140" />
或者
<el-table-column v-if="detailData.settlement_type === 3" key="1" label="结转下月金额111" prop="latestBalance" min-width="140" />

你可能感兴趣的:(element-ui,elementui,el-table,el-table-column,v-if,vue)