当前位置：首页 > news >正文

element-plus的菜单组件el-menu

news 2025/8/5 2:15:08

菜单是几乎是每个管理系统的软件系统中不可或缺的，element-plus提供的菜单组件可以快速完成大部分的菜单的需求开发，
该组件内置和vue-router的集成，使用起来很方便。

主要组件如下

el-menu 顶级菜单组件

主要属性
mode:决定菜单的展示模式，水平或者垂直。
router:是否启用vue-router

在这里插入图片描述

el-sub-menu 子菜单组件

子菜单组件，如果子菜单还有子菜单可进行多层嵌套
index属性是比较重要的，推荐设置
在这里插入图片描述

el-menu-item-group

菜单项组组件
主要属性
title:标识分组类别

el-menu-item

菜单项组件
index属性：如果启用vue-router，此属性需要跟vue-router的路由的path保持一致。
route：可不设置，如果设置了前者
在这里插入图片描述

示例

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { RouterLink, RouterView,useRoute,useRouter } from 'vue-router'
import type {MenuItemRegistered} from 'element-plus'const selectEvent=(obj:MenuItemRegistered)=>{console.log(obj.index)
}</script><template><div><el-container><el-header></el-header><el-main><el-row><el-col :span="12"><h5>未来manager</h5><el-menu router default-active="/about"><el-sub-menu index="userCenter"><template #title><el-icon><location /></el-icon><span>系统管理</span></template><el-menu-item-group title="用户center"><el-menu-item index="/" @click="selectEvent">用户管理</el-menu-item><el-menu-item index="/about" @click="selectEvent">用户组管理</el-menu-item></el-menu-item-group></el-sub-menu></el-menu></el-col><el-col :span="12"><router-view v-slot="{ Component }"><keep-alive ><component :is="Component" :key="$route.fullPath" /></keep-alive></router-view></el-col></el-row></el-main><el-footer></el-footer></el-container></div></template><style scoped></style>

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ChatRoom from '@/components/ChatRoom.vue';const router = createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: ChatRoom}]
})export default router