世界上最伟大的投资就是投资自己的教育
ant design 的 tree 如何作为角色中的权限选择之一
随风发布于74 次阅读
编辑的时候要让权限能选中哦。
<ProForm.Item name="permissions" label={intl.formatMessage({ id: 'permission_choose' })}>
<Spin spinning={loading}>
<Tree
checkable
onExpand={onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
onCheck={onCheck}
checkedKeys={checkedKeys}
onSelect={onSelect}
selectedKeys={selectedKeys}
treeData={permissionGroups} // Use filtered top-level groups
fieldNames={{ title: 'name', key: '_id', children: 'children' }}
/>
</Spin>
</ProForm.Item>
首先这个地方,你要使用 tree 这个组件。
主要是这个 permissionGroups 的数据从哪里来
给看一下响应出来的数据:
{
"success": true,
"data": [
{
"_id": "66b1b54ef8871ea52a7e3de9",
"name": "认证管理",
"createdAt": "2024-08-06T05:31:58.495Z",
"updatedAt": "2024-08-10T02:24:31.070Z",
"__v": 0,
"children": [
{
"_id": "66b1b00bb5d937a0aef34034",
"name": "权限",
"createdAt": "2024-08-06T05:09:31.292Z",
"updatedAt": "2024-08-10T02:24:41.759Z",
"__v": 0,
"parent": {
"_id": "66b1b54ef8871ea52a7e3de9",
"name": "认证管理",
"createdAt": "2024-08-06T05:31:58.495Z",
"updatedAt": "2024-08-10T02:24:31.070Z",
"__v": 0
},
"children": [
{
"_id": "66adee8cd22d6d5b1ce00780",
"name": "更新权限",
"path": "/permissions/:id",
"action": "PUT",
"permissionGroup": "66b1b00bb5d937a0aef34034",
"createdAt": "2024-08-03T08:47:08.777Z",
"updatedAt": "2024-08-10T02:38:15.837Z",
"__v": 0
},
{
"_id": "66b1a12b0e10340bd8bbeba0",
"name": "删除权限",
"path": "/permissions",
"action": "DELETE",
"createdAt": "2024-08-06T04:06:03.752Z",
"updatedAt": "2024-08-10T02:31:07.287Z",
"__v": 0,
"permissionGroup": "66b1b00bb5d937a0aef34034"
},
{
"_id": "66b1c55141364c27c464f858",
"name": "查看权限",
"path": "/permissions",
"action": "GET",
"permissionGroup": "66b1b00bb5d937a0aef34034",
"createdAt": "2024-08-06T06:40:17.991Z",
"updatedAt": "2024-08-10T08:03:27.245Z",
"__v": 0
},
{
"_id": "66b6cf51aa92a3526285b14d",
"name": "添加权限",
"path": "/permissions",
"action": "POST",
"createdAt": "2024-08-10T02:24:17.940Z",
"updatedAt": "2024-08-10T02:30:22.189Z",
"__v": 0,
"permissionGroup": "66b1b00bb5d937a0aef34034"
}
]
},
{
"_id": "66b6d2c9b9ad87dfa985f34f",
"name": "用户",
"parent": {
"_id": "66b1b54ef8871ea52a7e3de9",
"name": "认证管理",
"createdAt": "2024-08-06T05:31:58.495Z",
"updatedAt": "2024-08-10T02:24:31.070Z",
"__v": 0
},
"createdAt": "2024-08-10T02:39:05.563Z",
"updatedAt": "2024-08-10T02:39:05.563Z",
"__v": 0,
"children": [
{
"_id": "66b6d339b9ad87dfa985f3dd",
"name": "添加用户",
"path": "/users",
"action": "POST",
"permissionGroup": "66b6d2c9b9ad87dfa985f34f",
"createdAt": "2024-08-10T02:40:57.583Z",
"updatedAt": "2024-08-10T02:41:30.112Z",
"__v": 0
},
{
"_id": "66b6d352b9ad87dfa985f3f0",
"name": "查看用户",
"path": "/users",
"action": "GET",
"permissionGroup": "66b6d2c9b9ad87dfa985f34f",
"createdAt": "2024-08-10T02:41:22.895Z",
"updatedAt": "2024-08-10T08:03:22.477Z",
"__v": 0
},
{
"_id": "66b6d368b9ad87dfa985f416",
"name": "删除用户",
"path": "/users",
"action": "DELETE",
"permissionGroup": "66b6d2c9b9ad87dfa985f34f",
"createdAt": "2024-08-10T02:41:44.912Z",
"updatedAt": "2024-08-10T02:41:44.912Z",
"__v": 0
},
{
"_id": "66b6d37bb9ad87dfa985f429",
"name": "更新用户",
"path": "/users/:id",
"action": "PUT",
"permissionGroup": "66b6d2c9b9ad87dfa985f34f",
"createdAt": "2024-08-10T02:42:03.242Z",
"updatedAt": "2024-08-10T02:45:40.000Z",
"__v": 0
}
]
},
{
"_id": "66b6d2ddb9ad87dfa985f362",
"name": "菜单",
"parent": {
"_id": "66b1b54ef8871ea52a7e3de9",
"name": "认证管理",
"createdAt": "2024-08-06T05:31:58.495Z",
"updatedAt": "2024-08-10T02:24:31.070Z",
"__v": 0
},
"createdAt": "2024-08-10T02:39:25.628Z",
"updatedAt": "2024-08-10T02:39:25.628Z",
"__v": 0,
"children": [
{
"_id": "66b6d440b9ad87dfa985f488",
"name": "添加菜单",
"path": "/menus",
"action": "POST",
"permissionGroup": "66b6d2ddb9ad87dfa985f362",
"createdAt": "2024-08-10T02:45:20.021Z",
"updatedAt": "2024-08-10T02:45:20.021Z",
"__v": 0
},
{
"_id": "66b6d46cb9ad87dfa985f4c1",
"name": "删除菜单",
"path": "/menus",
"action": "DELETE",
"permissionGroup": "66b6d2ddb9ad87dfa985f362",
"createdAt": "2024-08-10T02:46:04.896Z",
"updatedAt": "2024-08-10T02:46:04.896Z",
"__v": 0
},
{
"_id": "66b6d47db9ad87dfa985f4d4",
"name": "更新菜单",
"path": "/menus/:id",
"action": "PUT",
"permissionGroup": "66b6d2ddb9ad87dfa985f362",
"createdAt": "2024-08-10T02:46:21.612Z",
"updatedAt": "2024-08-10T02:46:52.140Z",
"__v": 0
},
{
"_id": "66b6d48bb9ad87dfa985f4e7",
"name": "查看菜单",
"path": "/menus",
"action": "GET",
"permissionGroup": "66b6d2ddb9ad87dfa985f362",
"createdAt": "2024-08-10T02:46:35.896Z",
"updatedAt": "2024-08-10T08:03:13.698Z",
"__v": 0
}
]
},
{
"_id": "66b6d2e9b9ad87dfa985f377",
"name": "角色",
"parent": {
"_id": "66b1b54ef8871ea52a7e3de9",
"name": "认证管理",
"createdAt": "2024-08-06T05:31:58.495Z",
"updatedAt": "2024-08-10T02:24:31.070Z",
"__v": 0
},
"createdAt": "2024-08-10T02:39:37.339Z",
"updatedAt": "2024-08-10T02:39:37.339Z",
"__v": 0,
"children": [
{
"_id": "66b6d39eb9ad87dfa985f43c",
"name": "添加角色",
"path": "/roles",
"action": "POST",
"permissionGroup": "66b6d2e9b9ad87dfa985f377",
"createdAt": "2024-08-10T02:42:38.531Z",
"updatedAt": "2024-08-10T02:42:38.531Z",
"__v": 0
},
{
"_id": "66b6d3dfb9ad87dfa985f44f",
"name": "删除角色",
"path": "/roles",
"action": "DELETE",
"permissionGroup": "66b6d2e9b9ad87dfa985f377",
"createdAt": "2024-08-10T02:43:43.882Z",
"updatedAt": "2024-08-10T02:43:43.882Z",
"__v": 0
},
{
"_id": "66b6d3fab9ad87dfa985f462",
"name": "更新角色",
"path": "/roles/:id",
"action": "PUT",
"permissionGroup": "66b6d2e9b9ad87dfa985f377",
"createdAt": "2024-08-10T02:44:10.845Z",
"updatedAt": "2024-08-10T02:45:31.647Z",
"__v": 0
},
{
"_id": "66b6d40db9ad87dfa985f475",
"name": "查看角色",
"path": "/roles",
"action": "GET",
"permissionGroup": "66b6d2e9b9ad87dfa985f377",
"createdAt": "2024-08-10T02:44:29.797Z",
"updatedAt": "2024-08-10T08:03:18.669Z",
"__v": 0
}
]
},
{
"_id": "66b6d2fdb9ad87dfa985f38e",
"name": "数据权限",
"parent": {
"_id": "66b1b54ef8871ea52a7e3de9",
"name": "认证管理",
"createdAt": "2024-08-06T05:31:58.495Z",
"updatedAt": "2024-08-10T02:24:31.070Z",
"__v": 0
},
"createdAt": "2024-08-10T02:39:57.756Z",
"updatedAt": "2024-08-10T02:39:57.756Z",
"__v": 0,
"children": [
{
"_id": "66b6d544b9ad87dfa985f559",
"name": "添加数据权限",
"path": "/data-permissions",
"action": "POST",
"permissionGroup": "66b6d2fdb9ad87dfa985f38e",
"createdAt": "2024-08-10T02:49:40.379Z",
"updatedAt": "2024-08-10T02:49:40.379Z",
"__v": 0
},
{
"_id": "66b6d559b9ad87dfa985f56c",
"name": "删除数据权限",
"path": "/data-permissions",
"action": "DELETE",
"permissionGroup": "66b6d2fdb9ad87dfa985f38e",
"createdAt": "2024-08-10T02:50:01.137Z",
"updatedAt": "2024-08-10T02:50:01.137Z",
"__v": 0
},
{
"_id": "66b6d578b9ad87dfa985f57f",
"name": "更新数据权限",
"path": "/data-permissions/:id",
"action": "PUT",
"permissionGroup": "66b6d2fdb9ad87dfa985f38e",
"createdAt": "2024-08-10T02:50:32.533Z",
"updatedAt": "2024-08-10T02:50:32.533Z",
"__v": 0
},
{
"_id": "66b6d586b9ad87dfa985f592",
"name": "查看数据权限",
"path": "/data-permissions",
"action": "GET",
"permissionGroup": "66b6d2fdb9ad87dfa985f38e",
"createdAt": "2024-08-10T02:50:46.780Z",
"updatedAt": "2024-08-10T08:03:04.925Z",
"__v": 0
}
]
},
{
"_id": "66b6d314b9ad87dfa985f3a7",
"name": "权限组",
"parent": {
"_id": "66b1b54ef8871ea52a7e3de9",
"name": "认证管理",
"createdAt": "2024-08-06T05:31:58.495Z",
"updatedAt": "2024-08-10T02:24:31.070Z",
"__v": 0
},
"createdAt": "2024-08-10T02:40:20.528Z",
"updatedAt": "2024-08-10T02:40:20.528Z",
"__v": 0,
"children": [
{
"_id": "66b6d4bdb9ad87dfa985f50d",
"name": "添加权限组",
"path": "/permission-groups",
"action": "POST",
"permissionGroup": "66b6d314b9ad87dfa985f3a7",
"createdAt": "2024-08-10T02:47:25.139Z",
"updatedAt": "2024-08-10T02:47:25.139Z",
"__v": 0
},
{
"_id": "66b6d500b9ad87dfa985f520",
"name": "删除权限组",
"path": "/permission-groups",
"action": "DELETE",
"permissionGroup": "66b6d314b9ad87dfa985f3a7",
"createdAt": "2024-08-10T02:48:32.481Z",
"updatedAt": "2024-08-10T02:48:32.481Z",
"__v": 0
},
{
"_id": "66b6d519b9ad87dfa985f533",
"name": "更新权限组",
"path": "/permission-groups/:id",
"action": "PUT",
"permissionGroup": "66b6d314b9ad87dfa985f3a7",
"createdAt": "2024-08-10T02:48:57.720Z",
"updatedAt": "2024-08-10T02:48:57.720Z",
"__v": 0
},
{
"_id": "66b6d52cb9ad87dfa985f546",
"name": "查看权限组",
"path": "/permission-groups",
"action": "GET",
"permissionGroup": "66b6d314b9ad87dfa985f3a7",
"createdAt": "2024-08-10T02:49:16.624Z",
"updatedAt": "2024-08-10T08:03:09.517Z",
"__v": 0
}
]
},
{
"_id": "66b9ad348554e602536acc67",
"name": "认证管理菜单",
"parent": {
"_id": "66b1b54ef8871ea52a7e3de9",
"name": "认证管理",
"createdAt": "2024-08-06T05:31:58.495Z",
"updatedAt": "2024-08-10T02:24:31.070Z",
"__v": 0
},
"createdAt": "2024-08-12T06:35:32.560Z",
"updatedAt": "2024-08-12T06:35:32.560Z",
"__v": 0,
"children": [
{
"_id": "66b9ad528554e602536acc84",
"name": "授权管理菜单",
"path": "/auth",
"action": "GET",
"permissionGroup": "66b9ad348554e602536acc67",
"createdAt": "2024-08-12T06:36:02.754Z",
"updatedAt": "2024-08-12T06:36:02.754Z",
"__v": 0
}
]
}
]
},
{
"_id": "66adec30d647a4fde5546b1c",
"name": "材料类目",
"createdAt": "2024-08-03T08:37:04.433Z",
"updatedAt": "2024-08-10T02:24:51.188Z",
"__v": 0,
"children": [
{
"_id": "66b6d7a5b9ad87dfa985f749",
"name": "添加材料类目",
"path": "/material-categories",
"action": "POST",
"permissionGroup": "66adec30d647a4fde5546b1c",
"createdAt": "2024-08-10T02:59:49.106Z",
"updatedAt": "2024-08-10T07:36:39.702Z",
"__v": 0
},
{
"_id": "66b6d7b4b9ad87dfa985f75c",
"name": "删除材料类目",
"path": "/material-categories",
"action": "DELETE",
"permissionGroup": "66adec30d647a4fde5546b1c",
"createdAt": "2024-08-10T03:00:04.930Z",
"updatedAt": "2024-08-10T07:36:36.183Z",
"__v": 0
},
{
"_id": "66b6d7c4b9ad87dfa985f76f",
"name": "更新材料类目",
"path": "/material-categories/:id",
"action": "PUT",
"permissionGroup": "66adec30d647a4fde5546b1c",
"createdAt": "2024-08-10T03:00:20.075Z",
"updatedAt": "2024-08-10T07:36:32.789Z",
"__v": 0
},
{
"_id": "66b6d7d0b9ad87dfa985f782",
"name": "查看材料类目",
"path": "/material-categories",
"action": "GET",
"permissionGroup": "66adec30d647a4fde5546b1c",
"createdAt": "2024-08-10T03:00:32.932Z",
"updatedAt": "2024-08-10T08:02:59.634Z",
"__v": 0
}
]
}
],
"total": 2
}
组件好办,主要是后端这个数据结构,要对上。
name children ,这些要跟组件的参数对上。
无论你的后端如何写,你返回的数据一定要对上:
fieldNames={{ title: 'name', key: '_id', children: 'children' }}
这是第一步。
本站文章均为原创内容,如需转载请注明出处,谢谢。
0 条回复
暂无回复~~
© 汕尾市求知科技有限公司 | Rails365 Gitlab | 知乎 | b 站 | csdn
粤公网安备 44152102000088号 | 粤ICP备19038915号
Top