在使用 Element Plus 的 el-tree 组件时，如果后端返回的节点 key 数组中包含了部分选中的父级节点的 key，可能会导致该父级节点下的所有子节点也被默认选中。这是因为 el-tree 的默认行为是：如果一个父节点被选中，那么其所有子节点也会被选中。

为了解决这个问题，你需要在设置默认选中项时，手动检查每个节点的状态，确保只有指定的节点被选中，而其父节点和未指定的子节点不会被错误地选中。

以下是详细的解决方案和代码示例：

解决方案步骤

获取树形控件的引用：通过 ref 获取 el-tree 实例，以便调用其方法。
处理后端返回的 key 数组：遍历 key 数组，逐个设置节点的选中状态。
手动设置节点的选中状态：使用 setChecked 方法为每个节点单独设置选中状态，而不是依赖 default-checked-keys 属性。这可以避免父节点被自动选中导致子节点全部选中的问题。
确保数据加载完成后再设置选中状态：如果树形控件的数据是异步加载的，确保在数据加载完成后再进行选中状态的设置。

详细代码示例

<template><div><!-- 树形控件 --><el-treeref="tree":data="treeData":props="defaultProps"node-key="id"show-checkboxdefault-expand-all@check="onCheckChange"></el-tree><!-- 按钮触发设置默认选中 --><button @click="setDefaultCheckedKeys">设置默认选中</button></div>
</template><script>
import { defineComponent, ref, onMounted } from 'vue';
import { ElTree, ElMessage } from 'element-plus';export default defineComponent({components: {ElTree},setup() {// 树形控件的引用const tree = ref(null);// 树形控件的数据（假设从后端获取）const treeData = ref([{id: 1,label: '一级 1',children: [{ id: 4, label: '二级 1-1', children: [{ id: 9, label: '三级 1-1-1' }] },{ id: 5, label: '二级 1-2' }]},{id: 2,label: '一级 2',children: [{ id: 6, label: '二级 2-1' }]},{ id: 3, label: '一级 3', children: [] }]);// 树形控件的配置const defaultProps = {children: 'children',label: 'label'};// 后端返回的节点 key 数组（包含部分选中的父级节点）const backendCheckedKeys = [1, 4, 6]; // 例如：选中了一级 1、二级 1-1 和二级 2-1// 存储最终需要选中的节点 keyconst finalCheckedKeys = ref([]);// 监听树形控件的选中变化（可选，用于调试或进一步处理）const onCheckChange = (checkedKeys, checkedNodes, halfCheckedKeys, halfCheckedNodes) => {console.log('选中的 keys:', checkedKeys);console.log('半选中的 keys:', halfCheckedKeys);};// 设置默认选中项的方法const setDefaultCheckedKeys = () => {if (!tree.value) {ElMessage.error('树形控件未加载完成');return;}// 清空之前的选中状态tree.value.setCheckedKeys([]);// 遍历后端返回的 key 数组，逐个设置选中状态backendCheckedKeys.forEach(key => {const node = tree.value.getNode(key);if (node) {// 仅选中当前节点，不影响父节点和子节点node.setChecked(true, false); // 第二个参数为 false，表示不改变子节点的选中状态finalCheckedKeys.value.push(key); // 记录最终选中的 keyElMessage.success(`节点 ${node.label} 已选中`);} else {ElMessage.error(`未找到 key 为 ${key} 的节点`);}});};// 确保在树形控件数据加载完成后再设置选中状态onMounted(() => {// 如果数据是异步加载的，可以在这里调用 setDefaultCheckedKeys// 例如，通过 API 请求获取数据后调用setDefaultCheckedKeys();});return {tree,treeData,defaultProps,setDefaultCheckedKeys,onCheckChange,finalCheckedKeys};}
});
</script>

代码解析

模板部分 (<template>)：
- el-tree 组件设置了 ref="tree"，用于后续获取树形控件的实例。
- node-key="id" 指定了每个节点的唯一标识符为 id。
- show-checkbox 显示复选框。
- default-expand-all 默认展开所有节点。
- 一个按钮用于触发设置默认选中项的操作。
脚本部分 (<script>)：
- 数据定义：
  - treeData：树形控件的数据结构，通常从后端获取。这里为了示例，直接在前端定义。
  - defaultProps：配置树形控件的属性映射。
  - backendCheckedKeys：模拟后端返回的需要默认选中的节点 key 数组。注意，这个数组中包含了父级节点的 key（如 1），但只希望部分子节点被选中。
- 方法定义：
  - setDefaultCheckedKeys：主要方法，用于根据 backendCheckedKeys 设置默认选中项。它通过遍历 backendCheckedKeys，使用 getNode 方法获取对应的节点对象，然后调用 setChecked(true, false) 来仅选中当前节点，而不改变其子节点的选中状态。这样可以避免父节点被选中导致所有子节点被选中的问题。
  - onCheckChange：可选的监听器，用于监听树形控件的选中状态变化，便于调试或进一步处理。
- 生命周期钩子：
  - onMounted：确保在组件挂载后调用 setDefaultCheckedKeys，特别是在数据是异步加载的情况下。
- 响应式变量：
  - finalCheckedKeys：用于记录最终被选中的节点 key，可以在其他地方使用或展示。
关键逻辑：
- 避免父节点被自动选中：通过调用 node.setChecked(true, false)，仅将当前节点设置为选中状态，而不影响其子节点。这意味着即使某个父节点在 backendCheckedKeys 中，也只会选中该节点本身，而不会递归选中其所有子节点。
- 清空之前的选中状态：在设置新的默认选中项之前，先调用 tree.value.setCheckedKeys([]) 清空所有选中状态，确保不会有残留的选中项影响结果。
- 错误处理：如果某个 key 没有对应的节点，会通过 ElMessage.error 提示用户。

运行效果

当点击“设置默认选中”按钮时，树形控件会根据 backendCheckedKeys 数组中的 key 设置相应的节点为选中状态。由于使用了 setChecked(true, false)，只有指定的节点会被选中，而其父节点和未指定的子节点不会被错误地选中。例如：

如果 backendCheckedKeys 包含 1（一级 1）、4（二级 1-1）和 6（二级 2-1）：
- 一级 1 会被选中，但其子节点（如二级 1-2）不会被选中。
- 二级 1-1 会被选中，且其子节点（如三级 1-1-1）不会被选中。
- 二级 2-1 会被选中。

注意事项

确保 node-key 唯一：node-key 属性指定的字段值必须在树形控件中是唯一的，否则可能导致意外的行为。
异步数据加载：如果树形控件的数据是通过异步请求获取的，确保在数据加载完成后再调用 setDefaultCheckedKeys。可以通过监听数据加载完成的事件或使用 this.$nextTick 来实现。
性能优化：对于非常大的树形控件，频繁调用 getNode 和 setChecked 可能会影响性能。可以考虑优化数据结构或减少不必要的操作。
用户体验：在实际应用中，可能需要更复杂的逻辑来处理用户的交互，例如允许用户手动选择或取消选择某些节点，同时保持默认选中的逻辑。根据具体需求进行调整。