element UI 导航栏根据路径来确定默认选中
<template>
<el-menu :default-active="activedMenu($route.path)" class="el-menu-vertical-demo padding-top-10" @open="handleopen" @close="handleclose" @select="handleselect"
unique-opened router>
<template v-for="(item,index) in navData" :index="index+''" v-if="item.role">
<el-submenu :index="index+''" v-if="item.panels.length > 0">
<template slot="title"><i :class="item.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{item.name}}</template>
<el-menu-item-group v-for="panels in item.panels" :index="panels.name" :key="panels.name" v-if="panels.role">
<el-menu-item v-if="panels.menu.length == 0" :index="panels.url" ><i :class="panels.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{panels.name}}</el-menu-item>
<el-submenu v-else :index="panels.name">
<template slot="title"><i :class="panels.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{panels.name}}</template>
<el-menu-item v-for="menu in panels.menu" :index="menu.url" :key="menu.url" v-if="menu.limit">
<i class="nav-radius"></i>{{ menu.name }}
</el-menu-item>
</el-submenu>
</el-menu-item-group>
</el-submenu>
<el-menu-item v-else :index="item.url"><i :class="item.icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>{{item.name}}</el-menu-item>
</template>
</el-menu> </template>
el-submenu或者el-menu-item的index设置成路由对应的字符串,也是根据路由选择左侧导航栏,但是路由可能有不固定的参数,那就根据固定的参数来判断选择哪一项:
activedMenu: function (val) {
if (val.indexOf('/project') == 0) {
return '/project/'
} else if (val.indexOf('/alarm') == 0) {
return '/alarm/'
} else if (val.indexOf('/backup') == 0) {
return '/backup/'
} else if (val.indexOf('/sites_monitor') == 0) {
return '/sites_monitor/'
} else if (val.indexOf('/security_group') == 0) {
return '/security_group/'
} else if (val.indexOf('/lbaas') == 0) {
return '/lbaas/'
} else if (val.indexOf('/rule') == 0) {
if (val.indexOf('/user') > -1) {
return '/user/'
} else {
return '/user_group/'
}
} else if (val.indexOf('/create_page') == 0) {
if (val.indexOf('/instance') > -1) {
return '/instances/'
} else if (val.indexOf('/images') > -1){
return '/image/'
} else if (val.indexOf('/snapshot') > -1){
return '/snapshot/'
} else if (val.indexOf('/profile') > -1){
return '/ess_profile/'
}
} else if (val.indexOf('/monitor_detail') == 0) {
if (val.indexOf('/instances') > -1) {
return '/instances/'
} else {
return '/hypervisors/'
}
} else {
return val
}
},
element UI 导航栏根据路径来确定默认选中的更多相关文章
- elementUI的导航栏在刷新页面的时候选中状态消失的解决
首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...
- vue element ui 导航刷新 is-active
<el-menu :default-active="$route.path" router mode="horizontal"> <el-me ...
- vue Element UI 导航高亮
1. activeIndex 为默认高亮值,根据改变activeIndex的值来改变高亮的值 当页面改变的时候获取当前的路由地址,截取第一个 / 后面的值,就是当前的高亮值了 为什么要截取呢? 因为点 ...
- 饿了么element UI<el-dialog>弹出层</el-dialog>修改默认样式不能在<style scoped>修改
如果在非scoped下,修改el-dialog自动添加的DIV类名的style加上important,可以覆盖原来的width,但这样会让整个项目的样式都乱套. 如果在scoped下修改style.所 ...
- Element ui 中使用table组件实现分页记忆选中
我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...
- element ui 中的时间选择器怎么设置默认值/el-date-picker区间选择器怎么这是默认值
template代码 <el-date-picker value-format="yyyy-MM-dd" v-model="search.date" ty ...
- Nuxt内导航栏的两种实现方式
方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为i ...
- UIViewController的View显示在导航栏下面如何解决?
ios7之前的版本中UIViewController中的view在显示后会自动调整为去掉导航栏的高度的,控件会自动在导航栏以下摆放. 在iOS7中UIViewController的wantsFullS ...
- android -------- 沉浸式状态栏和沉浸式导航栏(ImmersionBar)
android 4.4以上沉浸式状态栏和沉浸式导航栏管理,包括状态栏字体颜色,适用于Activity.Fragment.DialogFragment.Dialog,并且适配刘海屏,适配软键盘弹出等问题 ...
随机推荐
- Load 和 DOMContentLoaded 区别
Load 事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕. DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析,不需要等待 CSS,JS,图片加载.
- 让div获取焦点
DIV获取焦点有两种方法: tabindex="0" contenteditable="true" ①:设置div为可编辑状态,则可点击获取焦点,同时div的内 ...
- 如何在 Github 上发现优秀的开源项目?
之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到点子上了,Git ...
- JSP 性能优化
无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...
- 检查死锁与Locked ownable synchronizers(转载)
通过jstack可快速检查线程的死锁信息,用法如下: # 获取JVM ID(JAVA 进程ID),通过参数lv可以获取更详细的JAVA方法调用信息 jps -lv # 得到JVM ID后,执行jsta ...
- [Aaronyang] 写给自己的WPF4.5 笔记9[复杂数据处理三步曲,数据展示ListView泪奔2/3]
我的文章一定要做到对读者负责,否则就是失败的文章 --------- www.ayjs.net aaronyang技术分享 作者留言: 小小的推荐,作者的肯定,读者的支持. ...
- 如何查看Apache的连接数和当前连接数
查看Apache的连接数和当前的连接数以及IP访问次数,下面有个不错的示例,大家可以参考下,希望对大家解决问题有所帮助 查看了连接数和当前的连接数 复制代码 代码如下: netstat -ant | ...
- IntelliJ IDEA的配置优化
IntelliJ IDEA的配置优化 我们安装完IntelliJ IDEA之后,在弹出的欢迎页面下方点击Configure,选择Setting,打开以下界面,我们在这个界面中进行配置. Appeara ...
- SNF快速开发平台MVC-审核流,审核完成后会给下一个审核人发邮件,下一个审核人可以不登录系统,在邮件里进行审核处理
审核流设计和使用参考以下资料: 审核流设计 http://www.cnblogs.com/spring_wang/p/4874531.html 审核流实例 http://www.cnblogs.com ...
- PHP 扩展开发之Zephir
最近对代码进行性能分析后,发现两个耗时的地方:自动加载文件数太多:参数验证函数调用超过1000次.这也是许多php语言框架面临的问题,所以发展出来诸如Yaf,Swoole,Phalcon这些C语言扩展 ...