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

相关推荐
大怪v26 分钟前
前端佬:机器学习?我也会啊!😎😎😎手“摸”手教你做个”自动驾驶“~
前端·javascript·机器学习
gnip3 小时前
链式调用和延迟执行
前端·javascript
杨天天.3 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu3 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
YU大宗师4 小时前
React面试题
前端·javascript·react.js
给月亮点灯|5 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
三思而后行,慎承诺5 小时前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
知识分享小能手5 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
lxh01136 小时前
LRU 缓存
开发语言·前端·javascript
wow_DG6 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架