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))