react 權(quán)限樹形結(jié)構(gòu)實(shí)現(xiàn)代碼
項(xiàng)目背景 react + ant design
實(shí)現(xiàn)效果

1 將后臺返回的平鋪數(shù)據(jù) , 轉(zhuǎn)成樹形結(jié)構(gòu)
const [roleId, setRoleId] = useState('') //存儲角色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)建一個新對象,準(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時同時處理選中狀態(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)(子空一個,父就空)
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生命周期與父子組件間通信知識點(diǎn)詳細(xì)講解
生命周期函數(shù)指在某一時刻組件會自動調(diào)用并執(zhí)行的函數(shù)。React每個類組件都包含生命周期方法,以便于在運(yùn)行過程中特定的階段執(zhí)行這些方法2022-11-11
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
react中的forwardRef 和memo的區(qū)別解析
forwardRef和memo是React中用于性能優(yōu)化和組件復(fù)用的兩個高階函數(shù),本文給大家介紹react中的forwardRef 和memo的區(qū)別及適用場景,感興趣的朋友跟隨小編一起看看吧2023-10-10
React中表單的雙向數(shù)據(jù)綁定的處理方法詳解
在前端開發(fā)中,雙向數(shù)據(jù)綁定(Two-way Data Binding)是指視圖(View)與數(shù)據(jù)模型(Model)之間保持同步,本文將詳細(xì)講解如何在 React 中實(shí)現(xiàn)雙向數(shù)據(jù)綁定,涵蓋原理、常見表單控件(如文本框、單選框、復(fù)選框、下拉框)的處理方式、優(yōu)化技巧以及最佳實(shí)踐2025-06-06
react性能優(yōu)化達(dá)到最大化的方法 immutable.js使用的必要性
這篇文章主要為大家詳細(xì)介紹了react性能優(yōu)化達(dá)到最大化的方法,一步一步優(yōu)化react性能的過程,告訴大家使用immutable.js的必要性,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03

