菜单栏的渲染我们使用element plus中提供的Menu组件开发,其中el-menu中的el-sub-menu代表目录,el-menu-item则是能点击跳转的菜单。来看一下后端返回的菜单数据结构 image.png 由此可知,如果一条数据有children则说明它是目录,否则则是菜单,这样就好办了,我们可以判断每条数据有没有children有的话渲染el-sub-menu,没...
elementPlus菜单三层动态渲染 vue element admin 动态菜单 一. 前言 本篇基于 有来商城 youlai-mall 微服务项目,通过对vue-element-admin的权限菜单模块理解个性定制其后台接口,实现对vue-element-admin工程几乎不做改动的情况下,无缝接入后台接口实现动态权限菜单的加载。 在进行接下来的工作前,我们需要对原生的vue-ele...
第三步 注册组件 // main.ts// 如果您正在使用CDN引入,请删除下面一行。import*asElementPlusIconsVuefrom'@element-plus/icons-vue'constapp=createApp(App)for(const[key,component]ofObject.entries(ElementPlusIconsVue)){app.component(key,component)} 第四步 使用component组件 绑定is动态绑定图标 直接使用 <...
跨过了Element-UI,终于来到了Element-plus。又回到了一个老问题,menu的渲染。 创建一个menu数组,利用v-for来渲染数组,生成menu,非常常规的操作。但是操作的过程中,出现了一个小问题,就是关于icon的渲染。 我们知道,在Element-plus中,渲染一个带图标的菜单项,是这么搞的: <el-menu-item index="/mypath"> <te...
Vu3+Element-Plus根据路由配置生成菜单导航栏 先看效果,整体界面结构如下 点击左侧菜单栏,右侧切换显示不同页面内容。 Vue3使用路由–南河小站 1 路由配置 路由配置如下: constroutes = [ { path:"", component:() =>import("@/layout/baseView.vue"),...
1.前端在本地写好路由表,以及每个路由对应的角色,也就是哪些角色可以看到这个菜单/路由; 2.登录的时候,向后端请求得到登录用户的角色(管理者、普通用户); 3.利用路由拦截,根据取到的用户角色,跟本地的路由表进行对比,过滤出用户对应的路由,并利用路由进行左侧菜单渲染 ...
动态渲染多级嵌套菜单 点击菜单跳转页面 子菜单高亮,对应父级菜单也高亮 不同路由高亮同一菜单 1.2源码 地址:https://gitee.com/YanaDH/vue3-element-template/tree/master 路径: src/layout/components/sidebar/menu 2 sub-menu 组件 <template> <el-sub-menu :index="menu.name" v-if="menu.childMenu"> ...
最后点击子菜单2.1就会发现这个页面被渲染出来了 写在最后 到这里动态路由添加基本完成了,当然可能还会有一些细枝末节需要处理,后面发现的话会进行完善。如果你想系统的了解一个权限管理系统如何搭建的话可以关注专栏Vue + Element Plus 实现权限管理系统(前端篇)和NestJS实现权限管理系统(后端篇),当然如果你只对前端感...
近期发现侧边栏的菜单项越来越多,伴随的问题就是点击子菜单展开收起时,肉眼可见的卡顿、迟缓。 二、原因: 随着菜单项数据越来越多,使用el-icon动态加载就会造成卡顿的问题,也就是说每次动态加载都会重新渲染一遍, 那么就极大地影响网页性能,下面是el-icon的动态加载示例: ...