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:可不设置,如果设置了前者
在这里插入图片描述

示例

<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

在这里插入图片描述
https://element-plus.org/zh-CN/component/menu.html#menu-item-attributes

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/53158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记录一下gitlab社区版的安装教程

目录 1.更新系统软件包 2.安装必要的依赖 3.添加GitLab源 3.1对于GitLab Enterprise Edition&#xff08;EE&#xff09;&#xff1a; 3.2对于GitLab Community Edition&#xff08;CE&#xff09;&#xff1a; 4.安装GitLab 4.1安装GitLab Enterprise Edition&#xff08;…

快人一步迅为LPDDR5版本瑞芯微RK3588核心板升级了

性能强--iTOP-3588开发板采用瑞芯微RK3588处理器&#xff0c;是全新一代ALoT高端应用芯片&#xff0c;采用8nm LP制程&#xff0c;搭载八核64位CPU&#xff0c;四核Cortex-A76和四核Cortex-A55架构&#xff0c;主频高达2.4GHZ&#xff0c;8GB内存&#xff0c;32GB EMMC。四核心…

PHP全程可视化防伪溯源一体化管理系统小程序源码

全程可视化&#xff0c;防伪溯源新篇章 —— 揭秘一体化管理系统的力量 &#x1f50d; 开篇&#xff1a;透视未来&#xff0c;从源头到终端的安心之旅 在这个信息透明化时代&#xff0c;每一件商品都承载着消费者的信任与期待。而“全程可视化防伪溯源一体化管理系统”&#x…

CleanClip for Mac 剪切板 粘贴工具 历史记录 安装(保姆级教程,新手小白轻松上手)

CleanClip&#xff1a;革新macOS剪贴板管理体验 目录 功能概览 多格式历史记录保存智能搜索功能快速复制操作拖拽功能 安装指南 前期准备安装步骤 配置与使用 功能概览 多格式历史记录保存 CleanClip支持保存文本、图片、文件等多种格式的复制历史记录&#xff0c;为用户提…

GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions

GIS OGC之WMTS地图服务&#xff0c;通过Capabilities XML描述文档&#xff0c;获取matrixIds&#xff0c;origin&#xff0c;计算resolutions 需求&#xff1a;如何根据WMTS服务的Capabilities描述文档得到&#xff0c;openlayers调用wmts服务时的matrixIds&#xff0c;origin…

Qwen 2.5:阿里巴巴集团的新一代大型语言模型

Qwen 2.5&#xff1a;阿里巴巴集团的新一代大型语言模型 摘要&#xff1a; 在人工智能领域&#xff0c;大型语言模型&#xff08;LLMs&#xff09;的发展日新月异&#xff0c;它们在自然语言处理&#xff08;NLP&#xff09;和多模态任务中扮演着越来越重要的角色。阿里巴巴集…

探索RESTful风格的网络请求:构建高效、可维护的API接口【后端 20】

探索RESTful风格的网络请求&#xff1a;构建高效、可维护的API接口 在当今的软件开发领域&#xff0c;RESTful&#xff08;Representational State Transfer&#xff09;风格的网络请求已经成为构建Web服务和API接口的标配。RESTful风格以其简洁、无状态、可缓存以及分层系统等…

[数据集][目标检测]俯拍航拍森林火灾检测数据集VOC+YOLO格式6116张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;6116 标注数量(xml文件个数)&#xff1a;6116 标注数量(txt文件个数)&#xff1a;6116 标注…

神经网络通俗理解学习笔记(0) numpy、matplotlib

Numpy numpynumpy 基本介绍Ndarray对象及其创建Numpy数组的基础索引numpy数组的合并与拆分&#xff08;重要&#xff09;numpy数组的矩阵运算Numpy数组的统计运算numpy中的arg运算numpy中的神奇索引和比较 Matplotlib numpy numpy 基本介绍 numpy 大多数机器学习库都用了这个…

视频监控平台是如何运作的?EasyCVR视频汇聚平台的高效策略与实践

随着科技的飞速发展&#xff0c;视频监控平台在社会安全、企业管理、智慧城市构建等领域发挥着越来越重要的作用。一个高效的视频监控平台&#xff0c;不仅依赖于先进的硬件设备&#xff0c;更离不开强大的视频处理技术作为支撑。这些平台集成了多种先进的视频技术&#xff0c;…

Python 如何封装工具类方法,以及使用md5加密

第一步&#xff1a;封装使用方法 在utils目录中&#xff0c;编写我的md5加密的方法&#xff0c;如下&#xff1a; import re import hashlib from os import path from typing import Callable from flask import current_app# 这里封装的是工具类的方法def basename(filenam…

Redis实现发布/订阅功能(实战篇)

前言 博主在学习 Redis 实现发布订阅功能的时候&#xff0c;踩了太多的坑。 不是讲解不详细&#xff0c;看的一知半解&#xff1b;就是代码有问题&#xff0c;实际压根跑不起来&#xff01; 于是博主萌生了自己写一个最新版且全程无错的博客供各位参考。希望各位不要把我才过…

【Python篇】深度探索NumPy(下篇):从科学计算到机器学习的高效实战技巧

文章目录 Python NumPy学习指南前言第六部分&#xff1a;NumPy在科学计算中的应用1. 数值积分使用梯形规则进行数值积分使用Simpson规则进行数值积分 2. 求解微分方程通过Euler方法求解一阶常微分方程使用scipy.integrate.solve_ivp求解常微分方程 3. 随机过程模拟模拟布朗运动…

Llama 3.1 Omni:颠覆性的文本与语音双输出模型

你可能听说过不少关于语言模型的进展,但如果告诉你,有一种模型不仅能生成文本,还能同时生成语音,你会不会觉得特别酷?今天咱们就来聊聊一个相当前沿的项目——Llama 3.1 Omni模型。这个模型打破了传统的文字生成边界,直接让文本和语音同时输出,实现了真正的"多模态…

网络爬虫到底难在哪里?

如果你是自己做爬虫脚本开发&#xff0c;那确实难&#xff0c;因为你需要掌握Python、HTML、JS、xpath、database等技术&#xff0c;而且还要处理反爬、动态网页、逆向等情况&#xff0c;不然压根不知道怎么去写代码&#xff0c;这些技术和经验储备起码得要个三五年。 比如这几…

基于milvus数据库的RAG-Demo

1.上传文本并将文本向量化 import os from django.conf import settings from langchain.document_loaders import TextLoader from langchain.text_splitter import RecursiveCharacterTextSplitter, CharacterTextSplitter from langchain.vectorstores import Chroma from l…

C++掉血迷宫

目录 开头程序程序的流程图程序游玩的效果下一篇博客要说的东西 开头 大家好&#xff0c;我叫这是我58。 程序 #include <iostream> #include <string> #include <cstring> using namespace std; enum RBYG {R 1,B 2,Y 4,G 7, }; struct heal {int ix…

Linux服务器本地部署Joplin Server并实现手机电脑多端同步文档

文章目录 前言1. 安装Docker2. 自建Joplin服务器3. 搭建Joplin Sever4. 安装cpolar内网穿透5. 创建远程连接的固定公网地址 前言 本文主要介绍如何在自己的服务器上利用docker搭建 Joplin Server&#xff0c;并对同步进行配置&#xff0c;再结合cpolar内网穿透工具实现公网远程…

学习Stable Diffusion使用 Roop插件轻松换脸(附插件)

在今天的分享中&#xff0c;将了解到如何获取并应用StableDiffusion的Roop插件&#xff0c;以达到完美的面部替换效果。 Roop是一款强大的工具&#xff0c;使您能够轻松地交换面孔并达到逼真的效果。 无论是艺术家、内容创作者&#xff0c;还是仅仅想要尝试图像处理的乐趣&am…

关于Vue2里 v-for和v-if一起用的时候会出现的问题

关于Vue2里 v-for和v-if一起用的时候会出现的问题 &#x1f389;&#x1f389;&#x1f389;欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!&…