element-ui中的el-table-column使用v-if导致列位置与数据错乱
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
描述
根据需求,当某一项列数据时或者某属性时才显示此列,使用v-if进行显示隐藏后,发现会有随机列位置错乱与数据错乱现象。
原因
经查询资料发现, 这是因为在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" />
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)