react 權(quán)限樹形結(jié)構(gòu)實(shí)現(xiàn)代碼
項(xiàng)目背景 react + ant design
實(shí)現(xiàn)效果
1 將后臺(tái)返回的平鋪數(shù)據(jù) , 轉(zhuǎn)成樹形結(jié)構(gòu)
const [roleId, setRoleId] = useState('') //存儲(chǔ)角色id // 彈權(quán)限彈窗 const empowerHandle = async record => { setRoleId(record.roleId) //獲取單獨(dú)的權(quán)限 const res1 = await getPermission({ roleId: record.roleId }) console.log('res1', res1) const res2 = await getSimple() console.log('res2', res2) //平鋪數(shù)據(jù)轉(zhuǎn)樹形結(jié)構(gòu) function buildTree (data, parentId = 0) { let tree = [] // 用于存放結(jié)果的數(shù)組 // 遍歷數(shù)據(jù),找到parentId匹配的項(xiàng) for (let item of data) { if (item.parentId === parentId) { // 創(chuàng)建一個(gè)新對象,準(zhǔn)備添加子節(jié)點(diǎn) let node = { ...item, children: buildTree(data, item.permissionId) } // 遞歸調(diào)用,處理子節(jié)點(diǎn) tree.push(node) // 將當(dāng)前節(jié)點(diǎn)添加到結(jié)果數(shù)組中 } } return tree } // title替換permissionName,讓樹形結(jié)構(gòu)內(nèi)容可以展示出來 const res3 = res2.map(item => { return { ...item, title: item.permissionName, key: item.permissionId } }) const result1 = buildTree(res1, 0) // 獲取單獨(dú)的權(quán)限 console.log('res1111111', result1) // 獲取res1中的permissionId作為已選中的Id列表 const selectedIds = res1.map(item => item.permissionId) console.log('selectedIds', selectedIds) // 構(gòu)建treeData時(shí)同時(shí)處理選中狀態(tài) const result = buildTree(res3, 0) console.log('3333333333333', result) setTreeData(result) setcheckedKeys(selectedIds) setempower(true) }
2 拿到角色id并傳遞到tree中
// 獲取選中的權(quán)限,為了修改權(quán)限 const ontreeCheck = checkedKeysValue => { console.log('onCheck', checkedKeysValue.checked) // 這里可以拿到選中的所有的權(quán)限id setcheckedKeys(checkedKeysValue.checked) } // 修改權(quán)限提交 const treesubmit = async () => { const res1 = await getEditPermission({ roleId: roleId, permissionIds: checkedKeys }) setempower(false) } <Tree checkable checkedKeys={checkedKeys} defaultExpandAll={false} //讓授權(quán)后的彈窗只展示根標(biāo)簽 treeData={treeData} // multiple // 支持多選。當(dāng)父子不關(guān)聯(lián),添加后,點(diǎn)擊父,不能控制所有子 // showLine //刪除這里,樹形結(jié)構(gòu)左側(cè)的下拉線消失,圖標(biāo)從+-更改為默認(rèn)的△ checkStrictly // 開啟后,父子節(jié)點(diǎn)不關(guān)聯(lián)(子空一個(gè),父就空) 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' } ])
到此這篇關(guān)于react 權(quán)限樹形結(jié)構(gòu)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react 權(quán)限樹形結(jié)構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React中進(jìn)行條件渲染的實(shí)現(xiàn)方法
React是一種流行的JavaScript庫,它被廣泛應(yīng)用于構(gòu)建Web應(yīng)用程序,在React中,條件渲染是一個(gè)非常重要的概念,它允許我們根據(jù)不同的條件來呈現(xiàn)不同的內(nèi)容,在本文中,我們將探討React如何進(jìn)行條件渲染,需要的朋友可以參考下2023-11-11Remix后臺(tái)開發(fā)之remix-antd-admin配置過程
這篇文章主要為大家介紹了Remix后臺(tái)開發(fā)之remix-antd-admin配置過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04使用React18和WebSocket構(gòu)建實(shí)時(shí)通信功能詳解
WebSocket是一種在Web應(yīng)用中實(shí)現(xiàn)雙向通信的協(xié)議,它允許服務(wù)器主動(dòng)向客戶端推送數(shù)據(jù),而不需要客戶端發(fā)起請求,本文將探索如何在React?18應(yīng)用中使用WebSocket來實(shí)現(xiàn)實(shí)時(shí)通信,感興趣的可以了解下2024-01-01react如何同步獲取useState的最新狀態(tài)值
這篇文章主要介紹了react如何同步獲取useState的最新狀態(tài)值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01