element-plus的菜单组件el-menu

news2024/9/20 9:42:29

菜单是几乎是每个管理系统的软件系统中不可或缺的，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