使用el-tree 处理权限树父节点半选和子节点选中获取,及回显父节点不覆盖所以子节点处理

avatar
作者
筋斗云
阅读量:0

1 获取 父子节点 key  当前 key = id 设置el-tree 

                 <el-tree                   v-if="isShowTree"                   ref="treeRef2"                   style="max-width: 260px"                   :data="assistantListTree"                   show-checkbox                   :default-expand-all="isExpandAll"                   node-key="id"                   :check-strictly="false"                   :props="{                     children: 'children',                     label: 'resourceName'                   }"                 />   const assistantListTree = ref([]) const isExpandAll = ref(false) const permissionIds  = ref([])  // 菜单节点全选及半选数据id - key const getMenuAllCheckedKeys_ids = () => {   // 目前被选中的菜单节点   let checkedKeys = treeRef1.value!.getCheckedKeys()   // 半选中的父级菜单节点   let halfCheckedKeys = treeRef1.value!.getHalfCheckedKeys()    permissionIds.value = [     ...checkedKeys,     ...halfCheckedKeys,       ]   // 2 渠道/助理暂无数据 }   2 回显示处理 

2 权限父子关联 又不想父级会显导致 子节点全选处理

// 请求节点详情数据 api==> ids   if (res.data?.code == 200) {         const { name, id, permissionIds } =           res.data?.data         // 回显权限角色选中状态         permissionIds &&           permissionIds.forEach((key_id: number | string) => {             // (key/data, checked, deep) 接收三个参数             treeRef1.value!.setChecked(key_id, true, false) // 第三个参数false  父节点不会选中所以子节点            })         // 指定部门数据之间相互独立       }

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!