API 返回数据格式
{
"success": true,
"code": 2000,
"msg": " 成功 ",
"data": [
{
"id": 1,
"parent_id": "0",
"menu_name": " 登陆 ",
"icons": "",
"url": "/v1/api/login",
"front_url": "login",
"method": "POST",
"created_at": "2022-06-28 11:08:04",
"children": null
},
{
"id": 3,
"parent_id": "0",
"menu_name": " 系统首页 ",
"icons": "",
"url": "/",
"front_url": "",
"method": "",
"created_at": "2022-06-29 10:33:04",
"children": [
{
"id": 4,
"parent_id": "3",
"menu_name": " 数据看板 ",
"icons": "",
"url": "/v1/api/dashboard/index",
"front_url": "board",
"method": "POST",
"created_at": "2022-06-29 10:48:39",
"children": null
}
]
},
{
"id": 5,
"parent_id": "0",
"menu_name": " 账号管理 ",
"icons": "",
"url": "/",
"front_url": "",
"method": "",
"created_at": "2022-06-29 10:50:23",
"children": [
{
"id": 6,
"parent_id": "5",
"menu_name": " 管理员列表 ",
"icons": "",
"url": "/v1/api/accounts/get/account/list",
"front_url": "accountList",
"method": "POST",
"created_at": "2022-06-29 10:51:13",
"children": [
{
"id": 9,
"parent_id": "6",
"menu_name": " 创建 ",
"icons": "",
"url": "/v1/api/accounts/add/account",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:53:41",
"children": null
},
{
"id": 10,
"parent_id": "6",
"menu_name": " 编辑 ",
"icons": "",
"url": "/v1/api/accounts/update/account",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:54:28",
"children": null
},
{
"id": 11,
"parent_id": "6",
"menu_name": " 删除 ",
"icons": "",
"url": "/v1/api/accounts/del/account",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:54:51",
"children": null
},
{
"id": 12,
"parent_id": "6",
"menu_name": " 禁用 / 启用 ",
"icons": "",
"url": "/v1/api/accounts/enable/disable/account",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:55:11",
"children": null
},
{
"id": 13,
"parent_id": "6",
"menu_name": " 修改密码 ",
"icons": "",
"url": "/v1/api/accounts/update/passwd",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:55:42",
"children": null
},
{
"id": 14,
"parent_id": "6",
"menu_name": " 角色分配 ",
"icons": "",
"url": "/v1/api/accounts/allocation/role",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:56:24",
"children": null
}
]
},
{
"id": 15,
"parent_id": "5",
"menu_name": " 角色列表 ",
"icons": "",
"url": "/v1/api/role/get/role/list",
"front_url": "roleList",
"method": "POST",
"created_at": "2022-06-29 10:57:59",
"children": [
{
"id": 16,
"parent_id": "15",
"menu_name": " 创建 ",
"icons": "",
"url": "/v1/api/role/add/role",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:58:41",
"children": null
},
{
"id": 17,
"parent_id": "15",
"menu_name": " 编辑 ",
"icons": "",
"url": "/v1/api/role/update/role",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:59:11",
"children": null
},
{
"id": 18,
"parent_id": "15",
"menu_name": " 禁用 / 启用 ",
"icons": "",
"url": "/v1/api/role/enable/disable/role",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:59:36",
"children": null
},
{
"id": 19,
"parent_id": "15",
"menu_name": " 删除 ",
"icons": "",
"url": "/v1/api/role/delete/role",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 10:59:54",
"children": null
},
{
"id": 20,
"parent_id": "15",
"menu_name": " 分配权限 ",
"icons": "",
"url": "/v1/api/role/allocation/permission",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 11:00:11",
"children": null
},
{
"id": 21,
"parent_id": "15",
"menu_name": " 删除权限 ",
"icons": "",
"url": "/v1/api/role/delete/permission",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 11:00:35",
"children": null
},
{
"id": 22,
"parent_id": "15",
"menu_name": " 查看权限 ",
"icons": "",
"url": "/v1/api/role/get/permissions/list",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 11:00:55",
"children": null
}
]
}
]
},
{
"id": 7,
"parent_id": "0",
"menu_name": " 菜单管理 ",
"icons": "",
"url": "/",
"front_url": "",
"method": "",
"created_at": "2022-06-29 10:51:35",
"children": [
{
"id": 8,
"parent_id": "7",
"menu_name": " 菜单列表 ",
"icons": "",
"url": "/v1/api/menu/get/menu/list",
"front_url": "menusList",
"method": "POST",
"created_at": "2022-06-29 10:52:10",
"children": [
{
"id": 23,
"parent_id": "8",
"menu_name": " 添加 ",
"icons": "",
"url": "/v1/api/menu/add/menu",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 11:01:36",
"children": null
},
{
"id": 24,
"parent_id": "8",
"menu_name": " 编辑 ",
"icons": "",
"url": "/v1/api/menu/update/menu",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 11:01:54",
"children": null
},
{
"id": 25,
"parent_id": "8",
"menu_name": " 删除 ",
"icons": "",
"url": "/v1/api/menu/delete/menu",
"front_url": "",
"method": "POST",
"created_at": "2022-06-29 11:02:20",
"children": null
}
]
}
]
}
]
}
Tree.vue
<template>
<div class="account-list">
<el-tree :data="menusData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
</template>
<script setup>
import {ref} from 'vue'
import {menuList} from '@/request/api'
const menusData = ref([])
const requestMenuList = async () => {let res = await menuList()
if (res) {if (res.data == []) {res.data = []
}
menusData.value = res.data
}
}
requestMenuList()
const defaultProps = {
children: menusData.value.children,
label: "menu_name",
}
const handleNodeClick=(menusData) => {// console.log(data);
}
handleNodeClick()
</script>
<style lang="scss">
.account-list{margin-left: 40px;}
</style>
效果:
正文完