vue 权限分组

在权限设计时，分为部门、岗位、人员三部分，人员下面挂部门，部门下面挂岗位，岗位下面挂菜单，用户在进行授权时，勾选了操作权限，默认数据权限也进行勾选。

权限组：查询、新增、修改、删除

用户交互如下：

1、选中新增、修改、删除中的任何一个复选框时，查询框也选中。

2、选中查询框时，新增、修改、删除不变。

3、取消选中查询框时，新增、修改、删除都取消选中。

代码如下：

<template><div><el-treeref="treeRef"class="permission-tree":data="menuTree"show-checkboxnode-key="id"default-expand-all:expand-on-click-node="false":check-on-click-node="true"@check="handleCheck":props="{label: 'title'}"></el-tree></div>
</template><script>
export default {data() {return {menuTree: [{id: '1717148200757',code: 'departmentManagement',title: '部门管理 ',name: '部门管理 ',parentIdId: null,children: [{id: '1717148287418',parentIdId: '1717148200757',code: 'department',title: '部门',name: '部门 ',children: [{id: 'department:query',code: 'department:query',name: '查询',title: '查询',parentIdId: '1717148287418',dataPermission: true},{id: 'department:add',code: 'department:add',name: '新增',title: '新增',parentIdId: '1717148287418',dataPermission: false},{id: 'department:update',code: 'department:update',name: '修改',title: '修改',parentIdId: '1717148287418',dataPermission: false},{id: 'department:delete',code: 'department:delete',name: '删除',title: '删除',parentIdId: '1717148287418',dataPermission: false}]}]},{id: '1717148223729',code: 'jobManagement',title: '岗位管理',name: '岗位管理',parentId: null,children: [{id: '1717148366037',parentId: '1717148223729',code: 'jobInside',title: '岗位',name: '岗位',children: [{id: 'permissionManagement:position:query',code: 'permissionManagement:position:query',name: '查询',title: '查询',parentIdId: '1717148366037',dataPermission: true},{id: 'permissionManagement:position:add',code: 'permissionManagement:position:add',name: '新增',title: '新增',parentIdId: '1717148366037',dataPermission: false},{id: 'permissionManagement:position:update',code: 'permissionManagement:position:update',name: '修改',title: '修改',parentIdId: '1717148366037',dataPermission: false},{id: 'permissionManagement:position:delete',code: 'permissionManagement:position:delete',name: '删除',title: '删除',parentIdId: '1717148366037',dataPermission: false}]}]},{id: '1717148248870',code: 'userManagement',title: '用户管理',name: '用户管理',parentId: null,children: [{id: '1717148408202',parentId: '1717148248870',code: 'userAdmin',title: '用户',name: '用户',children: [{id: 'userAdmin:query',code: 'userAdmin:query',name: '查询',title: '查询',parentIdId: '1717148408202',dataPermission: true},{id: 'userAdmin:add',code: 'userAdmin:add',name: '新增',title: '新增',parentIdId: '1717148408202',dataPermission: false},{id: 'userAdmin:update',code: 'userAdmin:update',name: '修改',title: '修改',parentIdId: '1717148408202',dataPermission: false},{id: 'userAdmin:delete',code: 'userAdmin:delete',name: '删除',title: '删除',parentIdId: '1717148408202',dataPermission: false}]}]}]};},methods: {/*** 复选框选中事件* 实现的效果：* 1、查询节点选中时，其相邻兄弟节点不变* 2、查询节点取消选中时，其相邻兄弟节点取消选中* 3、其相邻兄弟节点任何一个选中时，查询节点必选中* 注：查询节点 dataPermission:true* **/handleCheck(data) {if (!data.children) {// 获取当前叶子节点的兄弟节点const sublingsNode = this.getSiblingsById(this.menuTree, data.id);// 获取当前叶子节点中为查询节点的项const dataPermissionItem = [data, ...sublingsNode].find((item) => item.dataPermission);if (data.dataPermission) {// 操作的是查询节点时，将其兄弟节点设置为取消选中状态sublingsNode.forEach((item) => {this.$refs.treeRef.setChecked(item, false);});} else {// 操作的是兄弟节点时，将查询节点设置为选中状态this.$refs.treeRef.setChecked(dataPermissionItem, true);}}},/*** 通过当前节点的 id 查找兄弟节点* treeData：树形结构的数据源* nodeId：当前节点的 id* **/getSiblingsById(treeData, nodeId) {function findSiblings(nodes) {for (const node of nodes) {if (node.id === nodeId) {return nodes.filter((item) => item.id !== nodeId);}if (node.children) {const siblings = findSiblings(node.children, node.id);if (siblings) return siblings;}}return null;}return findSiblings(treeData, null);}}
};
</script>

总结：

在写这部分逻辑时，难点在于取消数据权限时，怎么将操作权限也进行取消，这部分的交互相当于是查询是新增、修改、删除的取消全选操作。在进行这部分交互效果实现时，有考虑过使用 current-change 这个事件，因为这个事件可以获取到一个 Node 对象，在 Node 对象中可以获取到当前节点父节点，从而在父节点下找到当前节点及兄弟节点，从而避免了使用递归的方式查找兄弟节点，这个事件有个问题，无法触发 check 事件，导致在点击复选框选中时，事件未触发，所以退而求其次考虑使用 check 事件，配合递归方法实现最终的交互效果。

补充：

可以将递归函数去掉，使用 elementUI 中提供的 getNode 方法获取当前节点的兄弟节点，修改如下：

<template><div><el-treeref="treeRef"class="permission-tree":data="menuTree"show-checkboxnode-key="id"default-expand-all:expand-on-click-node="false":check-on-click-node="true"@check="handleCheck":props="{label: 'title'}"></el-tree></div>
</template><script>
export default {data() {return {menuTree: [{id: '1717148200757',code: 'departmentManagement',title: '部门管理 ',name: '部门管理 ',parentIdId: null,children: [{id: '1717148287418',parentIdId: '1717148200757',code: 'department',title: '部门',name: '部门 ',children: [{id: 'department:query',code: 'department:query',name: '查询',title: '查询',parentIdId: '1717148287418',dataPermission: true},{id: 'department:add',code: 'department:add',name: '新增',title: '新增',parentIdId: '1717148287418',dataPermission: false},{id: 'department:update',code: 'department:update',name: '修改',title: '修改',parentIdId: '1717148287418',dataPermission: false},{id: 'department:delete',code: 'department:delete',name: '删除',title: '删除',parentIdId: '1717148287418',dataPermission: false}]}]},{id: '1717148223729',code: 'jobManagement',title: '岗位管理',name: '岗位管理',parentId: null,children: [{id: '1717148366037',parentId: '1717148223729',code: 'jobInside',title: '岗位',name: '岗位',children: [{id: 'permissionManagement:position:query',code: 'permissionManagement:position:query',name: '查询',title: '查询',parentIdId: '1717148366037',dataPermission: true},{id: 'permissionManagement:position:add',code: 'permissionManagement:position:add',name: '新增',title: '新增',parentIdId: '1717148366037',dataPermission: false},{id: 'permissionManagement:position:update',code: 'permissionManagement:position:update',name: '修改',title: '修改',parentIdId: '1717148366037',dataPermission: false},{id: 'permissionManagement:position:delete',code: 'permissionManagement:position:delete',name: '删除',title: '删除',parentIdId: '1717148366037',dataPermission: false}]}]},{id: '1717148248870',code: 'userManagement',title: '用户管理',name: '用户管理',parentId: null,children: [{id: '1717148408202',parentId: '1717148248870',code: 'userAdmin',title: '用户',name: '用户',children: [{id: 'userAdmin:query',code: 'userAdmin:query',name: '查询',title: '查询',parentIdId: '1717148408202',dataPermission: true},{id: 'userAdmin:add',code: 'userAdmin:add',name: '新增',title: '新增',parentIdId: '1717148408202',dataPermission: false},{id: 'userAdmin:update',code: 'userAdmin:update',name: '修改',title: '修改',parentIdId: '1717148408202',dataPermission: false},{id: 'userAdmin:delete',code: 'userAdmin:delete',name: '删除',title: '删除',parentIdId: '1717148408202',dataPermission: false}]}]}]};},methods: {/*** 复选框选中事件* 实现的效果：* 1、查询节点选中时，其相邻兄弟节点不变* 2、查询节点取消选中时，其相邻兄弟节点取消选中* 3、其相邻兄弟节点任何一个选中时，查询节点必选中* 注：查询节点 dataPermission:true* **/handleCheck(data, checked, indeterminate) {if (!data.children) {// 只处理叶子节点const parentNode = this.$refs.treeRef.getNode(data).parent;if (parentNode) {// 获取当前叶子节点的兄弟节点// const sublingsNode = this.getSiblingsById(this.treeData, data.id);// 获取当前叶子节点和兄弟节点const siblings = parentNode.data.children;const dataPermissionItem = siblings.find((item) => item.dataPermission);if (data.dataPermission) {// 如果是查询节点，则取消选中所有非查询兄弟节点siblings.forEach((sibling) => {if (!sibling.dataPermission) {this.$refs.treeRef.setChecked(sibling, false, false);}});} else if (checked) {// 如果是非查询节点被选中，则确保查询节点也被选中this.$refs.treeRef.setChecked(dataPermissionItem, true, false);}}}}// /**//  * 通过当前节点的 id 查找兄弟节点//  * treeData：树形结构的数据源//  * nodeId：当前节点的 id//  * **/// getSiblingsById(treeData, nodeId) {//   function findSiblings(nodes) {//     for (const node of nodes) {//       if (node.id === nodeId) {//         return nodes.filter((item) => item.id !== nodeId);//       }//       if (node.children) {//         const siblings = findSiblings(node.children, node.id);//         if (siblings) return siblings;//       }//     }//     return null;//   }//   return findSiblings(treeData, null);// }}
};
</script>