菜单栏的渲染我们使用element plus中提供的Menu组件开发,其中el-menu中的el-sub-menu代表目录,el-menu-item则是能点击跳转的菜单。来看一下后端返回的菜单数据结构 image.png 由此可知,如果一条数据有children则说明它是目录,否则则是菜单,这样就好办了,我们可以判断每条数据有没有children有的话渲染el-sub-menu,没...
点击左侧菜单中的“角色管理”,进入角色管理页面,现在我要修改系统管理员的权限,将新增的菜单展示出来,直接点击“权限分配”,弹出“权限分配”页面。 如果你想要展示的菜单,则需要勾选,如果不想要展示的菜单,则取消勾选,然后点击确定即可。 现在需要退出当前用户,然后重新登录,或者直接刷新网页链接,就可以看到已经添加...
先声明vue-element-admin此次改动的地方除了一个获取权限菜单的接口之外,剩余的改动全在 src/store/modules/permission.js 文件中。 看到了吗,可以说仅对vue-element-admin做两处改动,再加上对getRoutes调用后台接口返回的菜单数据的分析,就可以理解和实现动态权限菜单的加载了。 改动代码片段 + 注释说明 import {lis...
// useRoute().meta?.parentMenu : 自定义路由点亮菜单,在路由的 meta 上配置 parentMenu 字段,值为父级菜单的 name 值 const defaultActive = computed(() => useRoute().meta?.parentMenu || useRoute().name) const menuList = [ { name: 'home', chineseName: '首页' }, { name: 'literature...
简介:vue3 + elementplus 左侧菜单 无限无线递归渲染 在做一些管理后台的时候;一般会有权限不同看到的菜单也不同。而且菜单结构也是不确定有多少级别,或者无限级别。这里就需要组件递归渲染了 效果图: 后端菜单接口返回如下面这样的: mm: [{path:'hh',name:'系统管理',func_fid: 0,id: 1,children: [{id:...
vue3封装elementplus菜单下。上篇进主页查看。代码很有参考性。本周工作较多,终于更新新的内容,估计没有说清楚,但是写的代码估计还是很有用的。本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el- - 程序员优雅哥于20220918发布在抖音,已经收获了12个喜欢,
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plusel-menu组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。 1 数据结构定义 1.1 菜单项数据结构 使用element-plusel-menu组件实现菜单,主要包括三个组件: el-menu:整个菜单; ...
我们先采用上面的这个布局,随后点开菜单这个选项: 找到第一个顶栏的位置,点开源代码: 这个源代码很长,我们按照需求截取片段: <template> 在这个里面通过修改不同参数也可以里面内容的样式。 3.4、侧边栏制作 我们先找到侧栏的模板,然后找到刚刚页面布局的Aside部分: <template> 觉得这个不好看没关系,后面我们会...
Vu3+Element-Plus根据路由配置生成菜单导航栏 先看效果,整体界面结构如下 点击左侧菜单栏,右侧切换显示不同页面内容。 Vue3使用路由–南河小站 1 路由配置 路由配置如下: constroutes = [ { path:"", component:() =>import("@/layout/baseView.vue"),...
近期发现侧边栏的菜单项越来越多,伴随的问题就是点击子菜单展开收起时,肉眼可见的卡顿、迟缓。 二、原因: 随着菜单项数据越来越多,使用el-icon动态加载就会造成卡顿的问题,也就是说每次动态加载都会重新渲染一遍, 那么就极大地影响网页性能,下面是el-icon的动态加载示例: ...