element-plus el-tree页面两个el-tree 使用default-checked-keys 第二个tree选不上 vue3

### 解决方案 在 Vue3 中使用 Element Plus 的 `el-tree` 组件时，如果遇到第二个树节点无法通过 `default-checked-keys` 正常选中的问题，通常是因为以下几个原因： 1. **数据绑定不一致**：`default-checked-keys` 属性需要与 `node-key` 对应的数据字段保持一致性。如果 `node-key` 设置为某个属性（如 `id` 或 `enCode`），那么传递给 `default-checked-keys` 的数组也必须包含这些键对应的值[^1]。 2. **异步加载数据**：当树节点数据是动态加载的（例如从接口获取），而此时尝试设置 `default-checked-keys`，可能会因为数据尚未完全渲染而导致默认勾选失效[^3]。 3. **组件实例未正确初始化**：某些情况下，可能由于组件生命周期的原因，导致 `default-checked-keys` 未能及时生效。可以通过手动调用 API 方法来补充这一行为。 以下是具体的实现方式以及注意事项： --- #### 数据结构的一致性 确保 `el-tree` 的 `data` 数组中每个节点对象都具有唯一的 `key` 值，并且该值与 `node-key` 和 `default-checked-keys` 所需的值相匹配。例如： ```javascript const areaTree = [ { id: '001', // 节点唯一标识符 label: 'Node One', children: [ { id: '001-1', label: 'Child Node' }, ], }, ]; ``` 在此基础上，配置如下参数： ```vue <el-tree class="filter-tree" node-key="id" // 使用 id 字段作为 key :data="areaTree" :props="{ label: 'label' }" :default-checked-keys="['001']" // 默认勾选对应 id 的节点 show-checkbox /> ``` 注意这里的 `default-checked-keys=['001']` 是基于 `node-key='id'` 来指定的，默认勾选的是根节点 `Node One`。 --- #### 动态更新默认勾选项 对于动态加载的情况，可以监听数据变化并重新触发默认勾选逻辑。例如，在父组件中维护一个状态变量用于存储已勾选的节点 ID 列表： ```javascript import { ref, onMounted } from 'vue'; export default { setup() { const treeRef = ref(null); const checkedKeys = ref(['001']); // 初始化默认勾选列表 const loadData = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)); // 模拟异步请求 if (treeRef.value && Array.isArray(checkedKeys.value)) { treeRef.value.setCheckedKeys(checkedKeys.value); // 更新默认勾选 } }; onMounted(() => { loadData(); }); return { treeRef, checkedKeys, }; }, }; ``` 模板部分则绑定到这个引用上： ```vue <el-tree ref="treeRef" node-key="id" :data="areaTree" :props="{ label: 'label' }" show-checkbox /> ``` 这样即使数据延迟加载完成之后，也可以通过 `setCheckedKeys()` 方法强制应用默认勾选的状态。 --- #### 处理多个树组件间的冲突 如果有两个或更多个 `el-tree` 实例共存于同一页面，则需要注意它们之间的独立性和命名空间隔离。比如第一个树和第二个树分别拥有各自的 `ref` 名称及关联事件处理函数： ```vue <!-- 第一棵树 --> <el-tree ref="firstTree" node-key="id" :data="firstData" :default-checked-keys="['001']" show-checkbox /> <!-- 第二棵树 --> <el-tree ref="secondTree" node-key="id" :data="secondData" :default-checked-keys="['002']" show-checkbox /> ``` 同时建议分别为每棵数单独管理其状态信息，避免相互干扰。 --- ### 总结 为了使 Vue3 下 Element Plus 的 `el-tree` 支持正确的 `default-checked-keys` 行为，请确认以下几点： - 配置项之间的一致性； - 如果涉及异步操作，考虑显式调用 `setCheckedKeys()` 方法； - 当存在多处嵌套或者重复使用的场景下，务必区分各个实例的作用域范围。 ---