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