vue+elementui左侧导航栏

vue+elementui左侧导航栏踩坑
最近接触前端vue+elementui,记录一下
1、
element官网这里:default-active="***"前面没有冒号，直接将路由地址写上没问题，但是动态变量赋值的形式需要加上冒号，否则不生效
2、
顶级菜单和子菜单默认展开，关闭展开折叠、隐藏折叠展开小箭头

 <el-menu routerref="menus"@open="handleOpen"@close="handleClose":default-active="activPath" //activPath是我自己定义的变量，其他不同页面跳转过来的路由地址class="el-menu-vertical-demo"text-color="#303133"active-text-color="#409EFF":default-openeds="['1','2','3']" // 默认展开index为1、2、3的菜单，我这里展开的是父级菜单><el-submenu index="1" ><template slot="title" ><span style="font-weight: bold">账户设置</span></template><el-menu-item-group><el-menu-item index="/bas****seInfo"><span slot="title">基本信息</span></el-menu-item><el-menu-item index="/enterp*****rtification" ><span slot="title">企业认证</span></el-menu-item><el-menu-item index="/acc***ity"><span slot="title">账户安全</span></el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2" ><template slot="title"><span style="font-weight: bold">我的订阅</span></template><el-menu-item-group><el-menu-item index="2-1" ><span slot="title" >短信订阅</span></el-menu-item><el-menu-item index="2-2" ><span slot="title">邮件订阅</span></el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3" ><template slot="title"><span style="font-weight: bold">系统日志</span></template><el-menu-item-group><el-menu-item index="3-1" ><span slot="title" >登录日志</span></el-menu-item><el-menu-item index="3-2" ><span slot="title">操作日志</span></el-menu-item></el-menu-item-group></el-submenu></el-menu>

关闭折叠展开方法

  methods: {handleOpen(key, keyPath) {console.log(key, keyPath);this.$refs.menus.open(keyPath);},handleClose(key, keyPath) {this.$refs.menus.open(keyPath);},},

隐藏折叠隐藏小箭头

<style >
/*禁用左侧导航栏折叠箭头样式*/
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{display: none;}.el-submenu>.el-submenu__title .el-submenu__icon-arrow{display: none;}</style>

右侧对应路由页面主体内容显示

<el-main><!-- 主体内容 --><router-view></router-view></el-main>

vue+elementui左侧导航栏相关推荐

vue项目中处理左侧导航栏问题的分享
2019独角兽企业重金招聘Python工程师标准>>> 相信左侧导航栏大家都不陌生,几乎每个项目都会存在.以前用jquery做的时候,某些本不是什么问题的地方就突然变成阻碍了.下面就 ...
9.后台管理系统主页面布局以及左侧导航栏设计
9.后台管理系统主页面布局以及左侧导航栏设计 1.首页布局步骤: 在views目录下新建Main.vue文件,作为登录之后的布局参考:element-ui 使用此模块的目的是,当中间内容部分有超出 ...
element-ui使用导航栏跳转路由用法
element-ui使用导航栏跳转路由用法最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...
微信小程序购物车和左侧导航栏
先上实现图话不多说,直接上代码 cars.js // const arr = require("../../utils/data"); // pages/cars/cars.j ...
修改vue-element-admin左侧导航栏的图标
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和 ...
点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...
CSS3构建左侧导航栏
废话不说,先上图代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
xcode 左侧导航栏 no finder results 问题的解决方法
第一天使用xcode就遇到个很郁闷的问题,刚建的新工程,不知道怎么操作了,左侧导航栏的文件夹和文件等资源都没有了,只显示个"no finder results",试了各种方法都弄不 ...
基于CarSystemUI实现左侧导航栏NavigationBar及下拉面板定制开发1——Android10智能座舱
文章目录前言一.需求说明二.修改方案 1.基于需求的两种设计构想 2.修改正确的高度及宽度三.CarSystemUI 1.CarOS框架关于CarSystemUI的介绍 2.替换CarSyst ...

vue+elementui左侧导航栏

vue+elementui左侧导航栏相关推荐

最新文章

热门文章