vue3+element-plus 实现多级树形控件

作者: 太阳上的雨天 分类: Vue 发布时间: 2022-07-01 14:48
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>

效果:

image-20220701144746672

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注