tree组件需要的数据结构（用来实现数据权限）

后台返回的数据 渲染成tree组件需要的数据结构（用来实现数据权限）

第一步 明确我们要做什么，下面的图片就是我们需要做的。

第二步处理数据 上图片三张图片分别是后台返回的数据

1.第一张图片的数据为一级菜单的权限
2.第二张图片的数据为二级菜单的权限
3.第三张图片的数据为按钮和链接的权限
4.后台的数据有了 现在就是要把这些数据组合成我们所需要的数据。
5.第四张图片就是怎么把这些所有的数组通过递归的方式组合成一个我们所需要的数组
6.第五张图片就是我们最终处理完所需要的数据结构

第三步 数据我们有了 去组件里面复制这个组件 拿到自己的项目中 通过下面两段代码实现tree权限树的渲染（无论是Vue还是React数据的结构都是一样的）

//一二三级数据
  const renderTree = (data) => {
    return data.map(item => {
      if (!item.children) {
        return (
          <TreeNode title={item.title} key={item.key} ></TreeNode>
        )
      } else {
        return <TreeNode title={item.title} key={item.key} >
          {renderTree(item.children)}
        </TreeNode>
      }
    })
  }

{menu.length > 0 &&
          <Tree
            checkable
            onSelect={onSelect}
            onCheck={onCheck}
            defaultExpandAll={true}
            checkedKeys={checkedKeys} //默认选中的复选框
            autoExpandParent={true}//是否自动展开父节点
            checkStrictly    //就是这个属性
          >
            {renderTree(menu)}
          </Tree>
        }

最后贴出所有代码 希望你喜欢

//权限管理
import React, { useEffect, useState } from 'react';
import { Card, Radio, Tree, Button, notification } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { PageHeaderProps } from '@/utils/untils';
import { grantPermissionInit, grantRolePermission } from '@/services/permissionService'
import ShuttleBox from './ShuttleBox'
const TreeNode = Tree.TreeNode
const Permissions: React.FC = (props: any) => {
  const { id, pid, roleLevel, roleName } = props.history.location.state.record
  const [menu, setMenu] = useState([])
  const [checkedKeys, setCheckedKeys] = useState([])
  const [radio, setRadio] = useState(1)
  useEffect(() => {
    grantPermissionInit({ id, pid, roleLevel }).then(res => {
      if (res.code === '0') {
        const { firstMenus, secondMenus, buttons } = res.data
        const data = handleData(firstMenus, secondMenus, buttons)
        console.log(data,'datatdatda')
        setMenu(data)
        console.log(data, 'data......')
        const keys = mapCheckedKeys(data)
        setCheckedKeys(keys)
      }
    })
  }, [])

  // 处理权限列表数据
  const handleData = (firstMenu, secondMenu, buttons) => {
    const thirdMenu = buttons.filter(item => item.id.toString().length === 5)
    const forthMenu = buttons.filter(item => item.id.toString().length === 6)

    const handleMenu = (parentMenu, childMenu) => {
      parentMenu.forEach(parent => {
        parent.children = []
        parent.title = parent.resourceName
        parent.key = parent.id.toString()
        childMenu.forEach(child => {
          if (child.pid === parent.id) {
            parent.children.push({ ...child, children: child.children || [], title: child.resourceName, key: child.id.toString() })
          }
        })
      })
    }
    handleMenu(thirdMenu, forthMenu)
    handleMenu(secondMenu, thirdMenu)
    handleMenu(firstMenu, secondMenu)
    return firstMenu
  }

  //一二三级数据
  const renderTree = (data) => {
    return data.map(item => {
      if (!item.children) {
        return (
          <TreeNode title={item.title} key={item.key} ></TreeNode>
        )
      } else {
        return <TreeNode title={item.title} key={item.key} >
          {renderTree(item.children)}
        </TreeNode>
      }
    })
  }
 
  const onCheck = (allCheckedKeys: any, info: any) => {
    console.log('onCheck', allCheckedKeys, info);
    if (allCheckedKeys.checked) {
      let result = []
      allCheckedKeys.checked.forEach(item => {
        if (item.toString().length === 3) {
          result.push(item)
        }
        if (item.toString().length === 4) {
          result.push(item.toString().slice(0, 3), item)
        }
        if (item.toString().length === 5) {
          result.push(item.toString().slice(0, 3), item.toString().slice(0, 4), item)
        }
        if (item.toString().length === 6) {
          result.push(item.toString().slice(0, 3), item.toString().slice(0, 4), item.toString().slice(0, 5), item)
        }
      })
      let arr = Array.from(new Set(result))
      setCheckedKeys(arr)
    }

  };
  const grantRole = () => {
    let data = {
      permissionIds: checkedKeys,
      roleId: id,
      roleName
    }
    grantRolePermission(data).then(res => {
      if (res.code === '0') {
        props.history.goBack()
        notification.success({ message: '权限配置成功' })
      }
    })
  }

  const getLength = (arr) => {
    let length = 0;
    length += arr.length;
    arr.forEach(item => {
      length += getLength(item.children || [])
    })
    return length;
  }
  //获取所有返回数据选中的key值
  const mapCheckedKeys = (arr) => {
    let result = [];
    arr.forEach((item) => {
      let isHalf = false;
      if (item.children) {
        const filteredChildrenKeys = mapCheckedKeys(item.children);
        isHalf = filteredChildrenKeys.length !== getLength(item.children);
        result = result.concat(filteredChildrenKeys);
      }
      if (item.checked === "checked") {
        result.push(item.key);
      }
    });
    return result;
  };
 
 
  return (
    <PageHeaderWrapper {...PageHeaderProps}>
      <Card title="权限配置类型" bordered={false} style={{ width: '100%' }}>
        <Radio.Group onChange={onChange} value={radio}>
          <Radio defaultChecked={true} value={1}>
            功能权限
          </Radio>
          <Radio defaultChecked={true} value={2}>
            车型权限
          </Radio>
        </Radio.Group>

      </Card>
      {radio === 1 && <Card title={''} size="small">
        {menu.length > 0 &&
          <Tree
            checkable
            onSelect={onSelect}
            onCheck={onCheck}
            defaultExpandAll={true}
            checkedKeys={checkedKeys} //默认选中的复选框
            autoExpandParent={true}//是否自动展开父节点
            checkStrictly    //就是这个属性
          >
            {renderTree(menu)}
          </Tree>
        }
        <div style={{ float: 'right' }}>
          <Button type="primary" size="small" onClick={grantRole}>确定</Button>
          <Button size="small" style={{ marginLeft: "30px" }} onClick={() => { props.history.goBack() }}>取消</Button>
        </div>
      </Card>}
     
    </PageHeaderWrapper>
  );
};
export default Permissions;