我要评论项目背景 react + ant design
实现效果
1 将后台返回的平铺数据 , 转成树形结构
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)
//平铺数据转树形结构
function buildtree (data, parentid = 0) {
let tree = [] // 用于存放结果的数组
// 遍历数据，找到parentid匹配的项
for (let item of data) {
if (item.parentid === parentid) {
// 创建一个新对象，准备添加子节点
let node = { ...item, children: buildtree(data, item.permissionid) } // 递归调用，处理子节点
tree.push(node) // 将当前节点添加到结果数组中
}
}
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时同时处理选中状态
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 // 支持多选。当父子不关联,添加后,点击父,不能控制所有子
// showline //删除这里,树形结构左侧的下拉线消失,图标从＋－更改为默认的△
checkstrictly // 开启后,父子节点不关联(子空一个,父就空)
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 权限树形结构实现的文章就介绍到这了,更多相关react 权限树形结构内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论