react+antd 权限管理 Tree树形控件

记录一个自己在使用antd4处理权限管理数据接口时候方法，

<Tree
      checkable
      defaultCheckedKeys={['0-0-0', '0-0-1']}
      onSelect={onSelect}
      onCheck={onCheck}
      treeData={treeData}
/>

第一步展示

处理请求过来的数据 适用于tree treeData 格式，

并且拿到最后一级选择的id组成成数组给到defaultCheckedKeys ，

附带上treeDate格式

const treeData = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
      },
    ],
  },
];

第二部操作

获取选中keys

const onCheck = (checkedKeys) => {
    console.log(checkedKeys)
};

如上权限图片，当选中删除按钮时候，onCheck返回给我们的只有删除的key，实际上这个时候分配角色权限是

（1.系统管理，2.用户管理，3.删除）这个时候的key，还需要处理一下

1. 通过slice，截取删除key的父级key和父级父级的key，我的别是，前3位，前6位

const newArr = []
for (let item of selectArr) {
     newArr.push(item)
     const three = item.slice(0, 3)
     const idxT = newArr.indexOf(three);
     if (idxT < 0) {
         newArr.push(three)
     }
     const six = item.slice(0, 6)
     const idxS = newArr.indexOf(six);
     if (idxS < 0) {
          newArr.push(six)
     }
}
//去重
const lastArr = Array.from(new Set(newArr))