import { Document, Menu as IconMenu, Location, Setting, } from '@element-plus/icons-vue' const handleOpen = (key: string, keyPath: string[]) => { console.log(key, keyPath) } const handleClose = (key: string, keyPath: string[]) => { console.log(key, keyPath) } let menuList=[...
1. 第一步:首先改写VUE中的模板,修改sidebarMenu.vue文件,文件具体目录建下图: 将Menu导航菜单组件的的二级嵌套结构改为三级嵌套,无非就是判断二级路由页面下是否有children属性及是否含有子元素,有的话直接v-for循环生成子元素标签,新结构如下: <template> <Menu ref="sideMenu" :active-name="$route.name" :op...
2 设置路由 要求菜单可以切换成功,需要将菜单项的路由都添加到根路由的children节点里 import{ createRouter, createWebHistory }from'vue-router';importHomePagefrom'@/views/HomePage.vue';importCategroyPagefrom'@/views/CategoryPage.vue';importProductPagefrom'@/views/ProductPage.vue';importIndexPagefrom'@/vi...
动态添加路由:将菜单列表转换为 Vue 路由格式的数据后,可以使用 router.addRoute 方法动态添加路由。 接下看下如何实现动态加载路由与菜单 前置 开始之前我们先安装全局状态管理pinia npm i pinia -s 然后main.ts中引入,同时将element-plus的 Icon 全局注册(这里后续就能直接使用图标了) import{ createApp }from'...
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plusel-menu组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。 1 数据结构定义 1.1 菜单项数据结构 使用element-plusel-menu组件实现菜单,主要包括三个组件: el-menu:整个菜单; ...
Vue3和Element Plus可以配合使用,来创建菜单栏。 在Vue3中,使用Element Plus可以方便地创建公共组件,比如左侧的菜单栏和右侧的头像区域。左侧菜单栏可以通过<el-menu>标签实现,而右侧的头像区域可以通过点击头像进行登出等操作。 在Element Plus中,可以支持二级菜单甚至三级或更多的菜单,通过使用<el-submenu>可以实现...
简介:vue3+elementplus后台管理系统,实现侧边栏菜单显示到主内容区域 我们已经使用vue3和elmentplus初步搭建了首页,上一篇中有个问题没解决,就是在侧边栏导航功能里,如果点击菜单希望是在首页打开页面而不是跳转到新页面。以下是我们希望实现的效果 这样的好处是用户在切换菜单的时候不需要离开当前页面,方便操作。本篇...
一、使用vite新建项目和安装element plus $ npm create vite@latest $ npm install element-plus --save $ npm install @element-plus/icons-vue 二、Menu、面包屑、下拉菜单、Tab页示例 示例1:Menu导航 // App.vue import { Check, Delete, Edit, ...
{value:'1-1',label:'子菜单1-1',children: [ {value:'1-1-1',label:'子菜单1-1-1'}, {value:'1-1-2',label:'子菜单1-1-2'}, ], }, {value:'1-2',label:'子菜单1-2'}, ], }, {value:'2',label:'菜单2',children: [ ...