角色管理-角色权限-父子关联勾选

src/views/personnel/roleManagement.vue

@@ -65,7 +65,7 @@
                   style="margin-left: 20px;" />
               </div>
               <ElTree style="max-height: 350px;overflow-y: auto;" ref="treeRef" :data="treeData" :props="defaultProps"
-                show-checkbox node-key="id" :default-expand-all="true" check-strictly :default-checked-keys="checkedKeys"
+                show-checkbox node-key="id" :default-expand-all="true"  :default-checked-keys="checkedKeys"
                 @check="handleCheck" />
             </div>
           </div>
@@ -158,9 +158,13 @@ const handleCheck = (
     halfCheckedNodes: TreeNode[];
   }
 ) => {
+  const halfCheckedNodes = checkedInfo.halfCheckedNodes.map(val => {
+    return { ...val, halfChecked: 1 };
+  });
+  roleInfo.permsId = [];
+  roleInfo.perms = [];
   roleInfo.permsId = [...checkedInfo.checkedKeys, ...checkedInfo.halfCheckedKeys];
-  roleInfo.perms = [...checkedInfo.checkedNodes, ...checkedInfo.halfCheckedNodes];
-
+  roleInfo.perms = [...checkedInfo.checkedNodes, ...halfCheckedNodes];
 };
 
 async function roleSubmit() {
@@ -266,7 +270,7 @@ async function roleitemClick(item: { id: string }) {
   }
   await api.roleApi.roleGet({ roleId: item.id }).then((res: any) => {
     if (res.code === 200) {
-      checkedKeys.value = res.data.perms.map((val: Perm) => val.id);
+      checkedKeys.value = res.data.perms.filter((val: any) => val.halfChecked != 1).map((val: Perm) => val.id);
       roleInfo.permsId = res.data.perms.map((val: Perm) => val.id);
       roleInfo.perms = res.data.perms;
       roleInfo.name = res.data.name;