element-plus的菜单组件el-menu

菜单是几乎是每个管理系统的软件系统中不可或缺的,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:可不设置,如果设置了前者

示例

javascript 复制代码
<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>
javascript 复制代码
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


https://element-plus.org/zh-CN/component/menu.html#menu-item-attributes

相关推荐
angelQ28 分钟前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办42 分钟前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao1 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript
高台树色1 小时前
终于记住Javascript垃圾回收机制
javascript
武天1 小时前
一个项目有多个后端地址,每个后端地址的请求拦截器和响应拦截器都不一样,该怎么封装
vue.js
举个栗子dhy1 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
前端·javascript·react.js
sorryhc1 小时前
开源的SSR框架都是怎么实现的?
前端·javascript·架构
fox_1 小时前
别再混淆 call/apply/bind 了!一篇讲透用法、场景与手写逻辑(二)
前端·javascript
潜心编码1 小时前
基于vue的停车场管理系统
前端·javascript·vue.js
三小河1 小时前
React Vite 中动态批量导入路由
前端·vue.js