vue后台管理侧边栏菜单布局

三级菜单

1.使用Element组件中NavMenu 导航菜单

<!-- 侧边栏 --><el-aside width="212px"><!-- 侧边栏菜单 --><el-menubackground-color="#333744"text-color="#fff"active-text-color="#ffd04b":default-active="this.$route.path"routerunique-opened><!-- 一级菜单 --><!-- // :index="item.id +''"(由固定转活动的值，每个el-submenu等级的菜单有一个独有index值，作为使用菜单方法的一个必要搭配，这里绑定当前索引) --><el-submenu :index="item.url" v-for="item in munuList" :key="item.id"><!-- 一级菜单模板 --><template slot="title"><!-- 图标 --><i :class="iconsObj[item.id]"></i><!-- 文本 --><span>{{ item.name }}</span></template><!-- 二级子菜单 --><el-menu-item:index="subItem.url"v-for="subItem in item.child":key="subItem.id"><!-- 二级菜单模板 --><template slot="title"><!-- 文本 --><span>{{ subItem.name }}</span></template><!-- 三级子菜单 --><el-menu-item:index="thirdItem.url"v-for="thirdItem in subItem.child":key="thirdItem.id"><!-- 三级菜单文字 --><template><!-- 文字 --><span>{{ thirdItem.name }}</span></template></el-menu-item></el-menu-item></el-submenu></el-menu></el-aside>

2.补充内容：通过更改菜单项模板中i标签的类名，可以将左侧菜单栏的图标进行设置，在数据添加一个iconsObj,并定义菜单栏数据

 data() {return {// 一级菜单动态图标iconsObj: {1: 'el-icon-s-data',2: 'el-icon-phone-outline',3: 'el-icon-s-goods',},// 左侧菜单数据munuList: [{id: 1,name: '我是一级菜单',url: '/userData',child: [{id: 10,name: '我是二级菜单',url: '/home'}]},{id: 2,name: '我是一级菜单',url: '/manage',child: [{id: 20,name: '我是二级菜单',url: '/manage/jobNum',child: [{id: 201,name: '我是三级菜单',url: '/manage/jobNum/add'}]},{id: 21,name: '我是二级菜单',url: '/manage/role',child: [{id: 211,name: '我是三级菜单',url: '/manage/role/add'}]},{id: 22,name: '我是二级菜单',url: '/manage/setting'}]},{id: 3,name: '我是一级菜单小三',url: '/rule',child: [{id: 30,name: '我是二级菜单小五',url: '/rule/reception'}]},

vue后台管理侧边栏菜单布局相关推荐

从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）
往期从0到1完成一个Vue后台管理项目(一.创建项目) 从0到1完成一个Vue后台管理项目(二.使用element-ui) 从0到1完成一个Vue后台管理项目(三.使用SCSS/LESS,安装图标库 ...
vue后台管理知识点、难点总结01
vue后台管理知识点.难点总结 1.upload时,png格式的不能上传????(不对) 2 js中的项目应用什么时候用async和await 3 添加或者编辑的时候报错:Error in v-on ...
vue后台系统管理项目-菜单权限管理功能
vue后台系统管理项目: 技术选型:vue + element-ui 菜单权限管理模块功能菜单列表查询,通过(菜单名称:类型分为:全部.一级菜单.二级菜单:状态:启用.禁用)进行数据搜索. 查询.重 ...
仿微信公众号后台管理-自定义菜单
最近在做后台管理界面这是自定义菜单的页面笔记 (也不知道我的思路对不对) 点击菜单出现创建第一个菜单,并在该菜单上方出现可添加子菜单的添加按钮, 并展示修改该菜单的相关内容右侧展示有两个一个关 ...
WordPress后台添加侧边栏菜单
https://my.oschina.net/shunshun/blog/78193 https://www.ludou.org/add-admin-menu-in-wordpress.html 添加 ...
后台管理页面基本布局方式
经典页面布局简易后台管理页面布局 1 左边菜单栏固定 2 header固定高度(宽度自适应) 3 主体统计列表(宽度自适应) 代码如下 html <div class="main&q ...
Vue后台管理页面总体结构及主要功能设计
后台管理页面总体结构为:顶部左侧为系统标题,顶部右侧为用户图标及改密.退出菜单.中间左侧为功能菜单,中间右侧为操作区域,可以用el-row配合el-col来实现布局.其中导航菜单可以用el-menu配 ...
vue后台管理、APP项目总结集合
文章目录后台管理界面 APP 项目整体总结别慌,内容看起来多,其实都是一些小干货啦后台管理界面搭建一个vue项目: 配置相应的环境,如安装node,vue,webpack(最好安装一下淘宝镜像 ...
搭建Vue后台管理项目
从0开始快速搭建一个后台管理系统,搭建好之后就是下面这种形式安装node环境:下载地址:Node.js 安装脚手架:npm install -g @vue/cli 创建vue项目:vue creat ...

vue后台管理侧边栏菜单布局

三级菜单

vue后台管理侧边栏菜单布局相关推荐

最新文章

热门文章