vue3+element-plus 实现多级树形控件
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>
效果: