elementUI的导航栏怎么根据路由默认选中相关项
1.
<el-menu :default-active="this.$route.path.substr(1)" class="left-nav">
2.
<el-menu :default-active="activedMenu" class="left-nav" :collapse="isCollapse">
<el-menu-item index="project" @click="changeRoute('/project/list')">
<i class="iconfont icon-icproject"></i>
<span slot="title">项目管理</span>
</el-menu-item>
<el-submenu index="operation">
<template slot="title">
<i class="iconfont icon-icoperation"></i>
<span slot="title">运营管理</span>
</template>
<el-menu-item index="operation/test" @click="changeRoute('/operation/test')">
<i class="fa fa-list-alt"></i>考试题
</el-menu-item>
</el-submenu>
</el-menu>
ts:
get activedMenu() {
if (this.$route.path.indexOf('/project') == 0) {
return 'project'
} else if (this.$route.path.indexOf('/operation/test') == 0) {
return 'operation/test'
}
}
此时如果路径为:/project/12/···就可以根据开头“/project”定位到相应的左侧栏
elementUI的导航栏怎么根据路由默认选中相关项的更多相关文章
- element-ui使用导航栏跳转路由用法
element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...
- elementUI的导航栏在刷新页面的时候选中状态消失的解决
首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...
- JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...
- vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- 【WPF】ListBox使用DataTemplate 以及默认选中第一项Item
ListBox中DataTemplate的用法如下 . <ListBox x:Name="areaLB" ItemsSource="{Binding AreaNum ...
- Easyui combobox如何默认选中第一项???
以下代码可以实现combobox默认选中第一项,在实际开发中我们可能会用到! // 处理combobox默认选中的问题 <input id="user_type" class ...
- elementui更改导航栏样式
本来是这样,有下划线有点击背景,但是业务需求不需要,就想办法进行隐藏,控制台可以观察效果找出相应的类进行格式书写 以下效果: 放上代码 <style> .el-menu-demo{ hei ...
- 与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解
在引入了导航控制器UINavigationController和分栏控制器UITabBarController之后,我们在设置控件的frame的时候就需要注意避开导航栏UINavigationBar ...
- jsp 页面通过jq处理默认 选中的项 数据是通过遍历显示
jsp页面循环显示里面是<a></a>或者<input> id 以什么开头的id,然后当你点击那个的时候就在那个上面添加样式 <div> <di ...
随机推荐
- Ajax 跨域的几种解决方案
作者:黄轩链接:http://www.zhihu.com/question/19618769/answer/38934786来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处 ...
- PHP导出数据到表格的实例
我发现最近的项目需要导出Excel表的页面非常的多,想来这个也是我们常用的功能了,现在我可以很熟练的导出了,但是记得当时自己第一次导出时还是绕了一些弯路的,那么现在我就来记录下我这次用exshop框架 ...
- 【mysql学习笔记整理】
/*mysql学习笔记整理*/ /*常用的数据库操作对象*/ #库的操作#创建#数据库的创建USE mysql;CREATE DATABASE db_x;#删除#删除数据库DROP DATABASE ...
- webpack和sass功能简介
1.webpack webpack 是一个打包工具,为什么需要打包?因为有的人的脚本开发语言可能是 CoffeeScript 或者是 TypeScript,样式开发工具可能是 Less 或者 Sass ...
- 机器学习基础之knn的简单例子
knn算法是人工智能的基本算法,类似于语言中的"hello world!",python中的机器学习核心模块:Scikit-Learn Scikit-learn(sklearn)模 ...
- R语言学习笔记(六): 列表及数据框的访问
List R语言中各组件的名称叫做标签(tags),访问列表有3种方法: j$salary 通过标签名字访问,只要不引起歧义,可以只写出前几个字母. j[['sal']] 夹在两个中括号时引号里的标签 ...
- [POJ 1004] Financial Management C++解题
参考:https://www.cnblogs.com/BTMaster/p/3525008.html #include <iostream> #include <cstdio> ...
- C++11中initializer lists的使用
Before C++11,there was no easy way to do things like initialize a std::vector or std::map(or a custo ...
- Python连接符的种类和使用区别
python的连接符主要有 加号(+).逗号(,).空格( ) .反斜线(\).join()的方式. 加号(+),demo如下: #注意,+只能连接字符串,如果一个是字符串一个是数字就会报错 pr ...
- 玩转VIM之将Vim全副武装
玩转VIM之将Vim全副武装 懒癌末期的我貌似很久没有写博客了,已经欠了多少篇在计划中的博客我已然不好意思说了.好了,言归正传,在前三篇介绍了Vim作为代码编辑器之后可能会有人说,要学习那么多指令真的 ...