element-plus + vue3递归实现侧边栏菜单

需求：侧边栏能按照数据结构显示多层级的数据结构

第一步：在components文件夹中新建Sidebar.vue文件，代码如下

<template>
  <div>
    <el-menu :unique-opened="true" router>
      <!-- 递归组件 -->
      <NavMenu :menus="menus"></NavMenu>
    </el-menu>
  </div>
</template>
 
<script setup>
import menus from '@/router/menulist.js'
import { useRouter } from 'vue-router'
import NavMenu from './NavMenu.vue'
const router = useRouter()
</script>
 
<style scoped>
/* 侧边栏去掉竖线 */
.el-menu {
  border-right: 0;
}
</style>

第二步：在components文件夹中新建NavMenu.vue文件，代码如下

<template>
	<!-- 有子级-->
	<template v-for="item in menus">
		<template v-if="!item.meta.noShow">
			<el-sub-menu :index="item.meta.title" v-if="item.children && item.children.length > 0" :key="item.path">
				<template #title>
					<span>{{ item.meta.title }}</span>
				</template>
				<NavMenu :menus="item.children"> </NavMenu>
			</el-sub-menu>
			<!-- 没有子级-->
			<el-menu-item :index="item.path" :key="item.path" v-else>
				<template #title>
					<span>{{ item.meta.title }}</span>
				</template>
			</el-menu-item>
		</template>
	</template>
</template>
<script setup>
	import NavMenu from './NavMenu.vue'
	const props = defineProps(['menus'])
</script>
<style scoped></style>

第三步：在router文件夹下新建menulist.js文件，代码如下（此处只做演示，可根据自己需求调整）

const menu = [
	// meta: {  noShow: true ,隐藏}
	{
		path: '/organizational',
		name: 'organizational',
		// component: () => import('@/views/organizational/index.vue'),
		meta: { title: '组织架构' },
		children: [
			// 组织管理  人员管理  角色管理
			{
				path: '/organizational/organization',
				name: 'organizational-organization',
				component: () => import('@/views/organizational/organization.vue'),
				meta: { title: '部门管理' }
			},
			{
				path: '/organizational/personnel',
				name: 'organizational-personnel',
				component: () => import('@/views/organizational/personnel.vue'),
				meta: { title: '人员管理' }
			},
			{
				path: '/organizational/role',
				name: 'organizational-role',
				component: () => import('@/views/organizational/role.vue'),
				meta: { title: '角色管理' }
			}
		]
	},
	{
		// 应用管理
		path: '/application',
		name: 'application',
		component: () => import('@/views/application/index.vue'),
		meta: { title: '应用管理' }
	},
	{
		// 板块
		path: '/plate',
		name: 'plate',
		component: () => import('@/views/plate/index.vue'),
		meta: { title: '板块管理' }
	},
	{
		// 通知通告
		path: '/notice',
		name: 'notice',
		component: () => import('@/views/notice/index.vue'),
		meta: { title: '通知通告' }
	},
	{
		// 待办中心
		path: '/todo',
		name: 'todo',
		component: () => import('@/views/todo/index.vue'),
		meta: { title: '待办中心' }
	},
	{
		// 能力中心
		path: '/ability',
		name: 'ability',
		component: () => import('@/views/ability/index.vue'),
		meta: { title: '能力中心' }
	},
	{
		// 能力中心
		path: '/auditing',
		name: 'auditing',
		component: () => import('@/views/auditing/index.vue'),
		meta: { title: '访问申请' }
	}
]

export default menu

到此，一个递归的侧边栏菜单就完成啦~