vue 3 动态权限树需解耦权限树与角色权限，通过响应式数据（含 perm、checked、disabled 字段）和 el-tree 的 node-key、show-checkbox、check-strictly 等配置实现父子联动与状态同步，提交前收集 checked 且含 perm 的节点编码。
Vue 3 中处理权限配置项的动态勾选，核心在于把“权限树”和“当前角色已有权限”解耦绑定，并通过响应式逻辑控制节点的勾选状态、禁用行为与父子联动关系。不是简单渲染一个树，而是让树具备权限语义。
权限树数据结构要带标识字段
后端返回的菜单/权限树数据必须包含明确的权限标识（如 perm 字段）和状态字段（如 checked、disabled）。例如：
- id：节点唯一标识
- name：显示名称
-
perm：权限编码（如
sys:user:list），用于提交和校验 - children：子节点数组
- checked：是否已勾选（由角色已有权限初始化）
- disabled：是否禁用（如超级管理员的根节点不可取消）
使用 el-tree 的关键配置项
Element Plus 的 <el-tree></el-tree> 是最常用载体，需正确设置以下 props：
- :data 绑定权限树数组（含 checked/disabled）
- node-key="id" 明确唯一标识字段
- show-checkbox 启用复选框
-
:check-strictly="false"（默认）开启父子联动；设为
true则取消联动，适合按钮级细粒度权限 -
:default-checked-keys 可不传，改用
:checked-keys响应式双向绑定更可控 - :props="{ label: 'name', children: 'children' }" 映射字段名
动态控制勾选与禁用逻辑
权限勾选不是纯 UI 行为，需同步更新数据状态并影响后续操作：
- 监听
@check-change获取勾选变化，根据checked状态更新当前节点及其子节点的checked和disabled - 父节点被禁用时，子节点自动
disabled = true且不可修改（可用 computed 过滤或 watch 深层同步） - 切换角色时，清空整棵树的
checked，再根据新角色权限重新初始化 - 提交前遍历树，收集所有
checked === true && perm的权限编码，组成数组（如["sys:user:list", "sys:role:edit"]）
避免常见陷阱
实际开发中容易踩坑的点：
- 直接修改 tree 数据的
checked但没用ref或reactive包裹 → 界面不响应 → 必须确保树数据是响应式对象 - 在
@check回调里手动递归设置子节点checked，却忘了触发视图更新 → 改用nextTick或set方法保证响应 - 权限树接口返回的是扁平列表（parentId 模式），前端未正确转换为嵌套结构 → 需提前用工具函数转成 children 树形
- 勾选后提交的权限列表与后端约定格式不符（比如要 ID 数组，却传了 perm 数组）→ 提交前做字段映射
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
