react 權限樹形結構實現(xiàn)代碼
更新時間:2024年05月27日 14:58:59 作者:huoyueyi
這篇文章主要介紹了react 權限樹形結構實現(xiàn)代碼,項目背景react + ant design,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧
項目背景 react + ant design
實現(xiàn)效果
1 將后臺返回的平鋪數(shù)據(jù) , 轉成樹形結構
const [roleId, setRoleId] = useState('') //存儲角色id // 彈權限彈窗 const empowerHandle = async record => { setRoleId(record.roleId) //獲取單獨的權限 const res1 = await getPermission({ roleId: record.roleId }) console.log('res1', res1) const res2 = await getSimple() console.log('res2', res2) //平鋪數(shù)據(jù)轉樹形結構 function buildTree (data, parentId = 0) { let tree = [] // 用于存放結果的數(shù)組 // 遍歷數(shù)據(jù),找到parentId匹配的項 for (let item of data) { if (item.parentId === parentId) { // 創(chuàng)建一個新對象,準備添加子節(jié)點 let node = { ...item, children: buildTree(data, item.permissionId) } // 遞歸調用,處理子節(jié)點 tree.push(node) // 將當前節(jié)點添加到結果數(shù)組中 } } return tree } // title替換permissionName,讓樹形結構內容可以展示出來 const res3 = res2.map(item => { return { ...item, title: item.permissionName, key: item.permissionId } }) const result1 = buildTree(res1, 0) // 獲取單獨的權限 console.log('res1111111', result1) // 獲取res1中的permissionId作為已選中的Id列表 const selectedIds = res1.map(item => item.permissionId) console.log('selectedIds', selectedIds) // 構建treeData時同時處理選中狀態(tài) const result = buildTree(res3, 0) console.log('3333333333333', result) setTreeData(result) setcheckedKeys(selectedIds) setempower(true) }
2 拿到角色id并傳遞到tree中
// 獲取選中的權限,為了修改權限 const ontreeCheck = checkedKeysValue => { console.log('onCheck', checkedKeysValue.checked) // 這里可以拿到選中的所有的權限id setcheckedKeys(checkedKeysValue.checked) } // 修改權限提交 const treesubmit = async () => { const res1 = await getEditPermission({ roleId: roleId, permissionIds: checkedKeys }) setempower(false) } <Tree checkable checkedKeys={checkedKeys} defaultExpandAll={false} //讓授權后的彈窗只展示根標簽 treeData={treeData} // multiple // 支持多選。當父子不關聯(lián),添加后,點擊父,不能控制所有子 // showLine //刪除這里,樹形結構左側的下拉線消失,圖標從+-更改為默認的△ checkStrictly // 開啟后,父子節(jié)點不關聯(lián)(子空一個,父就空) 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' } ])
到此這篇關于react 權限樹形結構實現(xiàn)的文章就介紹到這了,更多相關react 權限樹形結構內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Remix后臺開發(fā)之remix-antd-admin配置過程
這篇文章主要為大家介紹了Remix后臺開發(fā)之remix-antd-admin配置過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04react如何同步獲取useState的最新狀態(tài)值
這篇文章主要介紹了react如何同步獲取useState的最新狀態(tài)值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01