react 权限树形结构实现

项目背景 react + ant design

实现效果

1 将后台返回的平铺数据 , 转成树形结构

javascript 复制代码
 const [roleId, setRoleId] = useState('') //存储角色id

  // 弹权限弹窗
  const empowerHandle = async record => {
    setRoleId(record.roleId)
    //获取单独的权限
    const res1 = await getPermission({ roleId: record.roleId })
    console.log('res1', res1)

    const res2 = await getSimple()
    console.log('res2', res2)

    //平铺数据转树形结构
    function buildTree (data, parentId = 0) {
      let tree = [] // 用于存放结果的数组

      // 遍历数据,找到parentId匹配的项
      for (let item of data) {
        if (item.parentId === parentId) {
          // 创建一个新对象,准备添加子节点
          let node = { ...item, children: buildTree(data, item.permissionId) } // 递归调用,处理子节点
          tree.push(node) // 将当前节点添加到结果数组中
        }
      }

      return tree
    }
    // title替换permissionName,让树形结构内容可以展示出来
    const res3 = res2.map(item => {
      return {
        ...item,
        title: item.permissionName,
        key: item.permissionId
      }
    })

    const result1 = buildTree(res1, 0) // 获取单独的权限

    console.log('res1111111', result1)

    // 获取res1中的permissionId作为已选中的Id列表
    const selectedIds = res1.map(item => item.permissionId)
    console.log('selectedIds', selectedIds)

    // 构建treeData时同时处理选中状态
    const result = buildTree(res3, 0)
    console.log('3333333333333', result)

    setTreeData(result)
    setcheckedKeys(selectedIds)

    setempower(true)
  }

2 拿到角色id并传递到tree中

javascript 复制代码
  // 获取选中的权限,为了修改权限
  const ontreeCheck = checkedKeysValue => {
    console.log('onCheck', checkedKeysValue.checked) // 这里可以拿到选中的所有的权限id
    setcheckedKeys(checkedKeysValue.checked)
  }

  // 修改权限提交
  const treesubmit = async () => {
    const res1 = await getEditPermission({
      roleId: roleId,
      permissionIds: checkedKeys
    })
    setempower(false)
  }


    <Tree
                checkable
                checkedKeys={checkedKeys}
                defaultExpandAll={false} //让授权后的弹窗只展示根标签
                treeData={treeData}
                // multiple // 支持多选。当父子不关联,添加后,点击父,不能控制所有子
                // showLine //删除这里,树形结构左侧的下拉线消失,图标从+-更改为默认的△
                checkStrictly // 开启后,父子节点不关联(子空一个,父就空)
                onCheck={ontreeCheck}
              />



  const [treeData, setTreeData] = useState([
    {
      title: '0-1',
      key: '0-1',
      children: [
        {
          title: '0-1-0-0',
          key: '0-1-0-0'
        },
        {
          title: '0-1-0-1',
          key: '0-1-0-1'
        },
        {
          title: '0-1-0-2',
          key: '0-1-0-2'
        }
      ]
    },
    {
      title: '0-2',
      key: '0-2'
    }
  ])
相关推荐
vivo互联网技术6 分钟前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆14 分钟前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙19 分钟前
GIT 配置别名&脚本自动化执行
前端·git
再吃一根胡萝卜21 分钟前
🔍 当 `<a-menu>` 遇上 `<template>`:一个容易忽视的菜单渲染陷阱
前端
Asort38 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney1 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥1 小时前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare1 小时前
选择文件夹路径
前端
艾小码1 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月1 小时前
JavaScript作用域与作用域链详解
前端·面试