用 reactive 管理后台权限菜单勾选状态树，需将带 checked/indeterminate/disabled 状态的嵌套树结构整体 reactive 包裹，禁止替换整棵树；父子联动逻辑在响应式对象内完成，并配合 el-tree 的 props 和 v-model:checkedKeys 实现双向同步。
用 reactive 管理后台权限菜单的勾选状态树，核心是把整个菜单树结构（含父子关系、选中/半选/禁用等状态）定义为一个响应式对象，并让它的变化能自动驱动 el-tree 或自定义树组件的渲染与交互。
菜单树数据必须带完整状态字段
不能只传原始菜单列表，要预先处理成含 checked、indeterminate、disabled 的结构。比如后端返回的是扁平数组，前端需递归转为嵌套树，并初始化每个节点的状态：
-
checked: boolean—— 是否被勾选 -
indeterminate: boolean—— 是否半选（父节点下部分子项被选） -
disabled: boolean—— 是否禁用（如超级管理员不可编辑某菜单） -
children: MenuNode[]—— 子节点数组，同样含上述字段
用 reactive 包裹整棵树，不是单个节点
直接对整个树结构调用 reactive，避免用 ref 套一层再取 .value。这样在模板中访问 menuTree.children[0].checked 更自然，也利于深度响应：
const menuTree = reactive(transformToTreeWithState(rawMenuList))
其中 transformToTreeWithState 是你封装的工具函数，负责递归生成带状态的树，并同步计算父子联动逻辑（比如子全选 → 父自动 checked；子部分选 → 父 indeterminate）。
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
更新状态时保持响应式穿透
不要直接赋值替换节点，而是修改节点属性。例如勾选某个节点：
- ✅ 正确：
node.checked = !node.checked（触发响应） - ❌ 错误：
menuTree = newTree（会丢失响应性，且破坏原有引用）
父子联动逻辑（如全选子项后自动更新父项状态）也要在同一个 reactive 对象内完成，确保所有变更都处于 Vue 的响应式追踪范围内。
配合 el-tree 使用的关键配置
Element Plus 的 el-tree 需要明确告诉它哪些字段代表状态：
:props="{ label: 'name', children: 'children', disabled: 'disabled', checked: 'checked' }"-
show-checkbox开启复选框 -
:check-strictly="false"启用父子联动（默认 true 表示不联动） -
:default-checked-keys="[]"不要用这个，改用v-model:checkedKeys绑定 reactive 数据中的已选 ID 列表
注意：如果用 v-model:checkedKeys，记得把 ID 提取逻辑写进 watch 或 computed，保持与 menuTree 状态同步。
