Vue 警告 Duplicate keys detected 重复键报错排查与解决

问题现象

控制台里突然刷出十几条同类报错，提示 [Vue warn]: Duplicate keys detected。这可能会引发更新错误，影响页面交互。

原因分析

起初控制台全是红字，网上常见说法是 v-for 的 key 绑定的值重复。但我反复检查了页面代码，确认 key 都是绑定的唯一 id，理论上不应该有问题。

深入排查后发现，是引入了 Ant Design 的 Table 组件。在表格列配置中，使用了重复的 dataIndex。虽然 key 没变，但某些组件内部逻辑或 Vue 的响应式追踪机制可能受到了 dataIndex 重复的影响，从而触发了这个警告。

注意 一般看到这种报错，第一反应是检查 v-for 的 key。但如果 key 确实唯一，就要留意 UI 组件库内部的配置项，比如这里的 dataIndex。

可以看到下面，表格使用了相同的 dataIndex，所以报错。

解决方案

修改表格组件的 dataIndex 配置，确保每个列的唯一性。在页面使用的地方稍作调整，保存后重新运行，错误就消失了。

遇到这种情况别慌，多从组件库配置细节入手，往往比单纯查 DOM 结构更有效。