具体问题场景：
用户点击父节点复选框将其从半选变为全选（此时子节点尚未加载）。
点击节点展开触发懒加载，加载子节点。
子节点加载后，组件重新计算父节点状态，发现并非所有子节点被选中，因此父节点恢复半选状态
解决方案：
核心思路：手动维护状态一致性
在父节点被手动全选时，即使子节点未加载，仍需保证：
当子节点加载后，自动选中所有子节点
强制更新父节点状态
1. 记录用户手动全选操作
2. 在复选框勾选事件中捕获全选操作
3. 在懒加载子节点后强制选中子节点
4. 清理状态记录（在节点折叠时清理状态记录，避免残留状态影响后续操作）
代码：
<template>
<el-tree
ref="tree"
:data="treeData"
lazy
:load="loadNode"
show-checkbox
node-key="menuId"
@check="handleCheck"
@node-collapse="handleNodeCollapse"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [],
forcedFullCheckedNodes: new Set()
};
},
methods: {
async loadNode(node, resolve) {
try {
// 1. 加载子节点
const children = await this.fetchChildren(node.data.menuId);
// 2. 如果父节点曾被强制全选，标记子节点为选中
if (this.forcedFullCheckedNodes.has(node.data.menuId)) {
children.forEach(child => {
child.checked = true;
child.indeterminate = false;
});
}
resolve(children);
// 3. 强制刷新父节点状态
this.$nextTick(() => {
this.$refs.tree.updateNode(node);
});
} catch (error) {
resolve([]);
}
},
handleCheck(checkedNode) {
// 检测是否是手动全选操作
const isManualFullCheck =
!checkedNode.children && //节点没有子节点（或子节点未加载）
checkedNode.indeterminate && //节点之前处于半选状态
this.$refs.tree.getCheckedKeys().includes(checkedNode.menuId);//节点当前已全选
if (isManualFullCheck) {
this.forcedFullCheckedNodes.add(e.menuId);
}
},
handleNodeCollapse(collapsedNode) {
// 节点折叠时清除状态记录
this.forcedFullCheckedNodes.delete(collapsedNode.menuId);
}
}
};
</script>data中定义数据为什么使用forcedFullCheckedNodes: new Set()？
用`Set`来跟踪那些被强制全选的节点，以确保即使子节点加载后，父节点的状态仍保持正确。
Set是JavaScript中的一种数据结构，可以自动保证存储的节点 ID 唯一，避免重复添加相同节点。用forcedFullCheckedNodes来记录那些被用户手动全选的节点ID，这样在加载子节点时，可以检查父节点是否在这个Set中，如果是，就强制其子节点为全选状态，从而保持父节点的全选状态。
为什么选择new Set()而不是其他数据结构，比如数组。Set提供了高效的查找和添加操作，因为Set的has和add方法的时间复杂度接近O(1)，而数组的includes和push可能需要遍历，效率较低。尤其是当节点数量较多时，使用Set会更高效。
在节点折叠时清理状态（如从 forcedFullCheckedNodes 中移除节点 ID）的原因主要有以下几点：
1. 避免状态残留干扰后续操作
场景：用户手动全选父节点 → 展开节点加载子节点并强制全选 → 折叠节点（子节点可能被销毁或隐藏）。
风险：若保留父节点的强制全选标记，当用户再次展开时，会重新触发懒加载，此时如果父节点仍在 forcedFullCheckedNodes 中，会重复强制全选子节点，导致以下问题：
若用户之前已手动取消某些子节点，重复强制全选会覆盖用户操作。
若数据已通过其他方式（如后端保存的 checkedKeys）初始化，强制标记会引发状态冲突。
2. 符合用户直觉
用户预期：折叠操作通常意味着“暂时不再关注该节点”，此时清理临时状态更符合直觉。
示例：用户手动全选父节点 → 展开处理子节点 → 折叠节点（视为操作完成）。后续再次展开时，父节点应基于当前实际子节点的选中状态（如从后端获取的最新状态）决定显示全选/选，而非依赖临时标记。
3. 性能优化
内存管理：动态树结构可能有大量节点，及时清理不再需要跟踪的节点，避免 forcedFullCheckedNodes 集合无限膨胀。
响应式开销：在 Vue 中，若使用数组或普通对象存储标记，频繁操作可能触发不必要的响应式更新。而 Set 虽高效，但需手动维护。
4. 与数据持久化配合
正确流程：
用户手动全选父节点 → 立即将所有子孙节点的选中状态提交后端保存。
折叠节点 → 清理 forcedFullCheckedNodes 中的临时标记。
再次展开时 → 通过后端返回的完整 checkedKeys 初始化选中状态，而非依赖内存中的临时标记。
优势：确保父子节点状态始终基于持久化数据，而非临时内存状态，避免数据不一致。
