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

描述

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

原因

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

解决

给标签el-table-column添加key

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容