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 ...
随机推荐
- hdu_1788_Chinese remainder theorem again (lcm
我知道部分同学最近在看中国剩余定理,就这个定理本身,还是比较简单的: 假设m1,m2,…,mk两两互素,则下面同余方程组: x≡a1(mod m1) x≡a2(mod m2) … x≡ak(mod m ...
- 微信订阅号 获取用户基本信息,登录及 php
<?php //echo file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_cr ...
- bootstrap Table动态绑定数据并自定义字段显示值
第一步:我们在官网下载了bootstrap 的文档,并在项目中引入bootstrap table相关js文件,当然,也要记得引入jquery文件 大概如图: 第二步:定义一个table控件 第三步:j ...
- Oracle数据库远程访问
如果需要访问非本机的Oracle数据库,首先需要安装一个Oracle的客户端,我直接安装的服务器版本的Oracle,也自带客户端. 安装完成后,如果访问本机的服务器的话,直接就可以访问,无需配置, 如 ...
- 进一步理解 frame 和 bounds
总结一下 iOS中 frame 和 bounds之间的区别 综述 frame和bounds都是描述一块矩形区域,但是他们是有区别的 frame:可视范围,可以理解为控件的大小,把控件当作边缘很薄 ...
- Yaf学习(二)----Yaf初体验
1.hello world 1.1 用yaf输出hello world 1.首先配置host,nginx 2.host不用多说,指向虚拟机IP即可 1.2 重点说一下nginx (只说server块) ...
- BigData--hadoop集群搭建之zookeer安装
Zookeeper安装 cd /opt/ tar -zxvf zookeeper-3.4.10.tar.gzmv zookeeper-3.4.10 /opt/zookeeper修改配置文件cd /o ...
- Linux基础(02)、MTPutty安装和使用
准备工具 1. MTPutty的安装包 2. Putty.exe程序 作用:远程连接操作Centos 安装MTPutty 1.根据提示,一直下一步至下图:选择putty.exe文件的位置即可. 2.选 ...
- python字符串编码
python默认编码 python 2.x默认的字符编码是ASCII,默认的文件编码也是ASCII. python 3.x默认的字符编码是unicode,默认的文件编码是utf-8. 中文乱码问题 无 ...
- 前端学习之HTML基础
要点: 理解HTTP请求响应模式及通信规范 HTML的各种标签和常用标签 CSS是用于样式渲染和定位布局 JS将HTML动态化 jquery是JS的高级封装 理解HTTP请求响应模式及通信规范 HTT ...