使用element-ui的el-menu导航选中后刷新页面保持当前选中
<el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds"
background-color="#bd1e22" text-color="#fff" active-text-color="#ffd04b">
//router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径,字符串,绝对路径
//unique-opened只允许有一个下拉菜单处于打开的状态
//使用default-active来实现当前菜单激活的选项
//default-openeds当前打开的 sub-menu 的 index 的数组
<el-menu-item index=‘/home‘>首页</el-menu-item>
<el-submenu>
<template slot="title">
<i class=‘‘></i><span>导航一</span>
</template>
<el-menu-item index=‘/first/page1‘>
<template slot="title">
<i class=‘‘></i><span>选项一</span>
</template>
</el-menu-item>
<el-menu-item index=‘/first/page2‘>
<template slot="title">
<i class=‘‘></i><span>选项二</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu
>
mounted(){
let path = this.$route.path;
this.navConfig = [
{index:'1',path:['/system/aa','/system/bb','/system/cc']},
];
let thisNav = this.navConfig.find(item =>{
return item.path.includes(path);
});
this.defaultOpeneds = [thisNav.index];
}
使用element-ui的el-menu导航选中后刷新页面保持当前选中的更多相关文章
- elementUI的导航栏在刷新页面的时候选中状态消失的解决
首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...
- element ui 渲染超过上百条数据时页面卡顿,更流畅的加载大量数据
问题:element ui table渲染上百条数据,页面渲染开始出现延时 解决方案:使用pl-table 注意:设置use-virtual并给定table高度
- element ui aside — 侧栏导航菜单移入移出折叠效果
效果如图,移入移出控制折叠,点击按钮后移入移出不可控制折叠. 功能是很简单的功能,不过昨天这块还是弄了小一个小时,所以记录下来. 发现的问题: 模版上el-aside写上@mouseenter无效 解 ...
- Vue ElementUI主页面搭建和导航栏使用,并在刷新页面的时候选中状态消失的问题解决
<template> <div style="height:100%;width: 100%; padding:0 auto; margin: 0 auto;"& ...
- element ui的表格列设置fixed后做动态表格出现表格错乱
最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...
- Element UI - 打开弹出框(el-dialog)页面会抖动
当 dialog 出现时,页面右边缩小了 5px,模态框看起来会抖动 解决方案 发现 body 多了样式:padding-right: 5px 和 overflow: hidden.紧接着我就在全局设 ...
- iView中Tree组件children中动态checked选中后取消勾选再选中无效问题
如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...
- cell选中后进入重用池出来选中状态消失
#import "XXViewController.h" @interface XXViewController ()<UITableViewDelegate,UITable ...
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
随机推荐
- c#时间戳相互转换
/// <summary> /// 获取时间戳 /// </summary> /// <returns></returns> public static ...
- Redis报错:ERR This instance has cluster support disabled
异常分析从报错误的信息ERR This instance has cluster support disabled很明显看得出来,是没有启动redis集群功能,可是我项目配置的集群的配置方式,要么修改 ...
- java版本的Kafka消息写入与读取
安装zookeeper: https://www.cnblogs.com/guoyansi19900907/p/9954864.html 并启动zookeeper 安装kafka https://w ...
- Android 图表控件的使用
一个简单不复杂的图表控件ChartLibs,目前仅仅提供三种图表控件:饼图.条形图和线性图.其展示效果 如下: 使用方法很简单,直接通过gradle导入ChartLibs依赖就可以,在build.gr ...
- KumuluzEE - Java EE的微服务框架
KumuluzEE - Java EE的微服务架构 https://www.jdon.com/soa/kumuluzEE.html
- [Go] 使用protobuf进行序列化和反序列化
先定义消息类型 orders.proto syntax = "proto2"; package message; message Orders { required int32 o ...
- 对于Python语音性能的一些个人见解
虽然运行速度慢是 Python 与生俱来的特点,大多数时候我们用 Python 就意味着放弃对性能的追求.但是,就算是用纯 Python 完成同一个任务,老手写出来的代码可能会比菜鸟写的代码块几倍,甚 ...
- Python3——根据m3u8下载视频(上)之urllib.request
干活干活,区区懒癌已经阻挡不了澎湃的洪荒之力了...... 运行环境:Windows基于python3.6 ---------------------------------------------- ...
- mock 模拟数据在框架中的简单使用
首先在框架中需要安装mock模块 cnpm i mockjs -S 其次在src文件夹下新建mock文件夹,在mock文件夹中新建一个index.js文件 代码如下: const Mock = req ...
- 【2019.10.7 CCF-CSP-2019模拟赛 T1】树上查询(tree)(思维)
思维 这道题应该算是一道思维题吧. 首先你要想到,既然这是一棵无根树,就要明智地选择根--以第一个黑点为根(不要像我一样习惯性以\(1\)号点为根,结果直到心态爆炸都没做出来). 想到这一点,这题就很 ...