近日在使用Element Plus开发的时候，在自定义了CustomTreeSelect后，控制台频繁的报以下错误：
找到最终的错误原因是来自于select.vue的错误警告，如下。
Duplicate keys found during update:"108"Make sure keys are unique. 2 Duplicate keys found during update:"109"Make sure keys are unique. Duplicate keys found during update:"124"Make sure keys are unique. Duplicate keys found during update:"122"Make sure keys are unique. Duplicate keys found during update:"113"Make sure keys are unique. Duplicate keys found during update:"102"Make sure keys are unique. Duplicate keys found during update:"101"Make sure keys are unique. Duplicate keys found during update:"118"Make sure keys are unique. 2 Duplicate keys found during update:"120"Make sure keys are unique. Duplicate keys found during update:"116"Make sure keys are unique. 2 Duplicate keys found during update:"117"Make sure keys are unique. Duplicate keys found during update:"92"Make sure keys are unique. Duplicate keys found during update:"91"Make sure keys are unique. 2 Duplicate keys found during update:"121"Make sure keys are unique. Duplicate keys found during update:"90"Make sure keys are unique. Duplicate keys found during update:"89"Make sure keys are unique. 2 Duplicate keys found during update:"105"Make sure keys are unique. 2 Duplicate keys found during update:"96"Make sure keys are unique. Duplicate keys found during update:"88"Make sure keys are unique. Duplicate keys found during update:"94"Make sure keys are unique.
在deepseek和豆包的建议下，经过反复的对自定义组件的修改，但是问题始终没有得到解决，但是它又不影响功能的正常使用，只是在组件编辑更新，自动折叠展开的时候才会出现这个问题，于是可以肯定，这个问题是来自于elment-plus的底层设计问题，采用精准屏蔽的方式消除该警告。在main.js文件中加入一下屏蔽代码，以下是具体屏蔽方法：
//1. 保存原始 console.warn
const originalWarn = console.warn;
// 2. 重写 warn，匹配警告核心文本（去掉对 select.vue 的依赖）
console.warn = function (...args) {
// 匹配条件：包含 "Duplicate keys found during update" 即可
const warnMsg = args[0] || '';
if (warnMsg.includes('Duplicate keys found during update')) {
// 可选：打印到控制台但不抛出警告（方便调试）
// console.log('[屏蔽的重复key警告]', ...args);
return; // 彻底屏蔽
}
// 其他警告正常输出
originalWarn.apply(console, args);
};
// 3. 覆盖 Vue 内部的 warnHandler（Element Plus 可能走这个通道）
app.config.warnHandler = (msg, instance, trace) => {
if (msg.includes('Duplicate keys found during update')) {
return;
}
originalWarn(`[Vue warn]: ${msg}`, trace);
};那么，为什么会出现这样的问题呢？以下是豆包给出的分析：
一、为什么 Element Plus 会 “无意义” 抛出这个警告？
这个警告本质是 Element Plus 组件设计的「逻辑漏洞」 —— 警告本身是 “误报”，但组件库的渲染机制导致无法避免，核心原因有 3 点：
1. el-select + el-tree 嵌套的「渲染模型冲突」
el-select 的下拉框是通过 teleport 挂载到 <body> 下的独立 DOM 容器（脱离当前组件 DOM 树）；
el-tree 是动态递归渲染的树形组件，折叠 / 展开时会频繁增删子节点；
当你操作树节点时，el-select 会感知到下拉框内的 DOM 变化并触发 “更新检查”，但 Vue 对「跨容器（teleport）的动态节点」的 key 跟踪机制存在缺陷 —— 明明节点 key 是唯一的，却误判为 “重复”，进而抛出警告。
2. Element Plus 内部的 v-for 索引 key 兜底逻辑
你之前看到的 select.vue 源码中，ElOption 的渲染用了 v-for="(item, index) in options" :key="index" —— 这是 Element Plus 为了兼容 “任意格式数据源” 的兜底逻辑：
即使你传入的 options 有唯一 value，组件内部仍会用 index 作为 ElOption 的 fallback key；
当树形数据动态更新时，index 会临时重复（比如折叠后子节点消失，展开后又出现），触发 Vue 的重复 key 检查，而 Element Plus 并未对这种嵌套场景做 “警告豁免”。
3. 警告是「Vue 底层的通用检查」，组件库未做过滤
这个警告并非 Element Plus 主动抛出，而是 Vue 内核对 v-for 渲染的通用检查：
Vue 会遍历所有带 key 的 DOM 节点，只要检测到同一层级有重复 key，就会调用 console.warn；
Element Plus 知道 el-select + el-tree 嵌套会触发这个误报，但出于 “不屏蔽通用警告” 的设计原则（避免掩盖真问题），并未在组件内过滤，最终导致警告暴露到控制台。
二、为什么警告 “不影响功能”？
因为这个警告是 “渲染层的误判”，而非 “业务逻辑错误”：
功能层面：你的 deptId 是唯一的，el-tree 的 node-key 能正确跟踪节点状态（选中、折叠 / 展开、编辑后更新），数据交互、接口调用、状态同步都不受影响；
渲染层面：Vue 即使检测到 “重复 key”，也会做「兜底处理」—— 强制重新渲染节点，虽然有性能损耗（微乎其微），但不会导致 DOM 错乱或功能异常；
简单说：Vue 只是 “提醒你可能有问题”，但实际没有问题，组件库也知道这个场景下的提醒是多余的，只是没做过滤。
三、补充：什么时候这个警告才是 “真问题”？
只有满足以下场景时，这个警告才需要重视（你的场景完全不满足）：
你手动写的 v-for 用了重复 key（比如列表渲染时 :key="index" 且数据有重复）；
业务数据真的有重复 ID（比如 deptId 重复），导致节点状态错乱（选中错节点、折叠后数据不更新）；
警告伴随功能异常（比如编辑后数据不刷新、新增子部门后下拉框空白）。
四、总结
这个警告是 Element Plus 组件库设计缺陷 + Vue 通用检查机制 叠加的 “误报”：
对开发者：无功能影响，只是控制台噪音，屏蔽即可；
对组件库：是已知的 “小瑕疵”，但修复成本高（需要修改 el-select 的 teleport 渲染逻辑 + 对 el-tree 嵌套场景做特殊 key 处理），因此长期未修复；
你的处理方式（精准屏蔽）是当前最优解 —— 既不影响功能，又消除控制台干扰，且不会掩盖其他真问题（因为只屏蔽了 “Duplicate keys found during update” 这一条警告）。
简单说：这是组件库的 “锅”，不是自己代码问题，屏蔽是合理且安全的选择。
B2C电商系统商城源码支持pC+小程序+公众号+H5可打包App源...
原生开发淘宝客App，Android+ios独立开发，全开源支持二...
知识付费系统在线教育平台源码+题库系统源码，PC+公众号商业授权...
B2C单商户电商系统源码部署小程序+公众号+H5+App源码...
教育知识付费系统源码带题库功能商业授权公众号+H5源码...
陕公网安备61019602000396 方烜律师事务所提供法律服务 | Copyright 2026 源码码网 版权所有
