文章目录

问题描述

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

原因

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

解决

给列加key值

<el-table-column
 :key="1"
>
</el-table-column>
# vue.js # ui # javascript # elementui
GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：3 个月前 )
c345bb45 1 年前
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 1 年前
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

Hunyuan OCR & Z-Image-Turbo 正式上线！两大模型在 NPU 加速平台完成部署，开启 AI 识图新时代！

avatar AtomGit开源社区
cover

COSCon‘2025 第十届中国开源年会，AtomGit 邀您共赴开源 + AI 的十年之约！

avatar AtomGit开源社区

从文献检索到论文成稿：7款AI工具助力你的学术研究全流程

没有哪一款工具是万能的，最佳实践是根据自己的具体需求，将它们组合成一套适合自己的个性化工作流。它将文献的“检索、管理、阅读、问答、写作”等功能整合在同一个工作空间内，致力于减少研究者在不同软件间的切换成本。输入一篇关键论文，Connected Papers能快速生成一张与该论文在学术上高度相关的文献网络图谱，直观地展示该领域的研究格局。其AI问答功能在回答时会附上来源文献及页码，保证了学术信息的严

avatar AtomGit开源社区