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

相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端11 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧11 小时前
Promise 的使用
前端·javascript
用户516816614584112 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅12 小时前
JavaScript 作用域
前端·javascript
前端缘梦12 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试