el-menu如何根据多层树形结构递归遍历展示菜单栏
作者：m0_62317155
这篇文章主要介绍了el-menu根据多层树形结构递归遍历展示菜单栏,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
前提条件
package.json如下所示，这是一个Vite + Vue3 + TS的项目
{
"name": "vue3-ts-vite-wen-zhang-ji-lu-xiang-mu",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"element-plus": "^2.4.2",
"vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"sass": "^1.69.5",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vue-tsc": "^1.8.5"
}
}下面为了方便，直接在App.vue组件中，代码结构如下所示，就一纯净项目，然后直接在App.vue中写代码
假设菜单等级只有两个等级
如果菜单等级只有两个等级，那就没有必要使用到递归了，直接遍历，然后根据是否有children字段，判断是一级菜单还是二级菜单就可以了。具体代码如下所示：
<template>
<div style="width: 100%; height: 100%;">
<div class="common-layout">
<el-container>
<el-header>头部</el-header>
<el-container>
<!-- 侧边栏区域 -->
<el-aside width="200px">
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<template v-for="(item, index) in menuList" :key="index">
<el-sub-menu :index="item.path" v-if="item.children && item.children.length">
<template #title>
<el-icon>
<location />
</el-icon>
<span>{{ item.name }}</span>
</template>
<el-menu-item v-for="child in item.children" :key="child.id" :index="child.path">
{{ child.name }}
</el-menu-item>
</el-sub-menu>
<el-menu-item v-else :index="item.path">
<el-icon><setting /></el-icon>
<span>{{ item.name }}</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
<!-- 主题区域 -->
<el-main>
这是主题区域
</el-main>
</el-container>
</el-container>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Location, Setting } from '@element-plus/icons-vue'
interface MenuItem {
id: number;
name: string;
path: string;
icon?: string;
component?: string;
children?: MenuItem[];
}
const menuList = ref<MenuItem[]>(
[
{
id: 1,
name: '首页',
path: '/',
icon: 'location',
component: 'home',
children: []
},
{
id: 2,
name: '用户管理',
path: '/user',
icon: 'location',
component: 'user',
children: [
{
id: 3,
name: '用户列表',
path: 'list',
icon: '',
component: 'userList',
children: []
},
{
id: 5,
name: '角色列表',
path: 'roleList',
icon: '',
component: 'userList',
children: []
}
]
},
{
id: 6,
name: '权限管理',
path: '/permission',
icon: 'setting',
component: 'permission',
children: [
{
id: 7,
name: '权限列表',
path: 'permissionList',
icon: '',
component: 'permissionList',
}
]
}
]
)
const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>
<style scoped lang="scss">
.el-container {
width: 100%;
height: 100%;
}
</style>结果如下所示
但是如果菜单等级超过两个等级或者多个等级的话
但是如果菜单等级超过两个等级或者多个等级的话，这时就可以使用到组件递归的方式进行了。目录结构如下所示：
App.vue
<template>
<div style="width: 100%; height: 100%;">
<div class="common-layout">
<el-container>
<el-header>头部</el-header>
<el-container>
<!-- 侧边栏区域 -->
<el-aside width="200px">
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<menu-items :items="menuList"></menu-items>
</el-menu>
</el-aside>
<!-- 主题区域 -->
<el-main>
这是主题区域
</el-main>
</el-container>
</el-container>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MenuItems from './components/MenuItems.vue'
interface MenuItem {
id: number;
name: string;
path: string;
icon?: string;
component?: string;
children?: MenuItem[];
}
const menuList = ref<MenuItem[]>(
[
{
id: 1,
name: '首页',
path: '/',
icon: 'location',
component: 'home',
children: []
},
{
id: 2,
name: '用户管理',
path: '/user',
icon: 'location',
component: 'user',
children: [
{
id: 3,
name: '用户列表',
path: 'list',
icon: '',
component: 'userList',
children: [
{
id: 4,
name: '用户详情',
path: 'userDetail',
icon: '',
component: 'userDetail',
children: []
}
]
},
{
id: 5,
name: '角色列表',
path: 'roleList',
icon: '',
component: 'userList',
children: []
}
]
},
{
id: 6,
name: '权限管理',
path: '/permission',
icon: 'setting',
component: 'permission',
children: [
{
id: 7,
name: '权限列表',
path: 'permissionList',
icon: '',
component: 'permissionList',
children: [
{
id: 8,
name: '权限详情-1',
path: 'permissionDetail',
icon: '',
component: 'permissionDetail',
children: [
{
id: 9,
name: '权限详情-2',
path: 'permissionDetail2',
icon: '',
component: 'permissionDetail2',
children: []
}
]
}
]
}
]
}
]
)
const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>
<style scoped lang="scss">
.el-container {
width: 100%;
height: 100%;
}
</style>MenuItems.vue
<template>
<template v-for="item in items" :key="item.id">
<el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path">
<template #title>
<span>{{ item.name }}</span>
</template>
<!-- 递归遍历 -->
<menu-items :items="item.children" />
</el-sub-menu>
<el-menu-item v-else :index="item.path">
<span>{{ item.name }}</span>
</el-menu-item>
</template>
</template>
<script setup lang="ts">
interface MenuItem {
id: number;
name: string;
path: string;
icon?: string;
component?: string;
children?: MenuItem[];
}
defineProps<{
items: MenuItem[];
}>()
</script>结果如下所示
从图中可以看出，无论是一层，二层，三层，四层结构的树形数据，都可以在el-menu中展示。
关于遍历时图标前的展示后续完善
关于点击路由跳转参考element plus的官网即可
到此这篇关于el-menu根据多层树形结构递归遍历展示菜单栏的文章就介绍到这了,更多相关el-menu多层树形结构递归遍历展示菜单栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！