当前位置： 首页 > news >正文

ant design 的 tree 如何作为角色中的权限选择之一

news 2025/11/29 14:36:52

在这里插入图片描述
在这里插入图片描述
这种功能如何弄呢？

编辑的时候要让权限能选中哦。

<ProForm.Item name="permissions" label={intl.formatMessage({ id: 'permission_choose' })}><Spin spinning={loading}><TreecheckableonExpand={onExpand}expandedKeys={expandedKeys}autoExpandParent={autoExpandParent}onCheck={onCheck}checkedKeys={checkedKeys}onSelect={onSelect}selectedKeys={selectedKeys}treeData={permissionGroups} // Use filtered top-level groupsfieldNames={{ 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' }}

这是第一步。

下一篇https://editor.csdn.net/md/?articleId=141324925


http://www.mrgr.cn/news/2927.html

相关文章：

  • 【大模型】triton inference server
  • 仿Muduo库实现高并发服务器——任务定时器模块
  • 如何在Sui上进行质押
  • PXE-Kickstart高效批量装机
  • axios的使用
  • 玩机进阶教程-----回读 备份 导出分区来制作线刷包 回读分区的写入与否 修改xml脚本
  • Ubuntu无法解析域名DNS指向127.0.0.53问题处理
  • ctfshow之web29~web51
  • 【数据结构】七、查找：3.散列查找（哈希表）
  • 部署YUM仓库及NFS共享服务
  • 华为鲲鹏技术认证是什么？为什么要通过认证？
  • 45.5【C语言】typedef
  • 代码随想录：动态规划6-10
  • 虚幻5|AI视力系统，听力系统，预测系统（1）视力系统
  • R语言：如何安装包“linkET”
  • 交换机怎么连线？一篇文章教你搞懂交换机的所有接口
  • 2024年企业图纸防泄密用什么加密？10款超好用的图纸加密软件推荐
  • NGINX 之 location 匹配优先级
  • 【Rust光年纪】探秘Rust语言数学优化库：从凸优化到线性规划
  • 如何提升 RocketMQ 顺序消费性能?