<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导航选中后刷新页面保持当前选中的更多相关文章

  1. elementUI的导航栏在刷新页面的时候选中状态消失的解决

    首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...

  2. element ui 渲染超过上百条数据时页面卡顿,更流畅的加载大量数据

    问题:element ui table渲染上百条数据,页面渲染开始出现延时 解决方案:使用pl-table 注意:设置use-virtual并给定table高度

  3. element ui aside — 侧栏导航菜单移入移出折叠效果

    效果如图,移入移出控制折叠,点击按钮后移入移出不可控制折叠. 功能是很简单的功能,不过昨天这块还是弄了小一个小时,所以记录下来. 发现的问题: 模版上el-aside写上@mouseenter无效 解 ...

  4. Vue ElementUI主页面搭建和导航栏使用,并在刷新页面的时候选中状态消失的问题解决

    <template> <div style="height:100%;width: 100%; padding:0 auto; margin: 0 auto;"& ...

  5. element ui的表格列设置fixed后做动态表格出现表格错乱

    最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...

  6. Element UI - 打开弹出框(el-dialog)页面会抖动

    当 dialog 出现时,页面右边缩小了 5px,模态框看起来会抖动 解决方案 发现 body 多了样式:padding-right: 5px 和 overflow: hidden.紧接着我就在全局设 ...

  7. iView中Tree组件children中动态checked选中后取消勾选再选中无效问题

    如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...

  8. cell选中后进入重用池出来选中状态消失

    #import "XXViewController.h" @interface XXViewController ()<UITableViewDelegate,UITable ...

  9. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

随机推荐

  1. 什么是面向对象编程(OOP)?

    Java 程序员第一个要了解的基础概念就是:什么是面向对象编程(OOP)? 玩过 DOTA2 (一款推塔杀人的游戏)吗?里面有个齐天大圣的角色,欧洲战队玩的很溜,国内战队却不怎么会玩,自家人不会玩自家 ...

  2. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  3. 某小公司RESTful、共用接口、前后端分离、接口约定的实践

    作者:邵磊 juejin.im/post/59eafab36fb9a045076eccc3 前言 随着互联网高速发展,公司对项目开发周期不断缩短,我们面对各种需求,使用原有对接方式,各端已经很难快速应 ...

  4. Python Web(三)

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.Django母版渲染 1.创建母版文件 base.html <!DOCTYPE html> < ...

  5. Cesium专栏-裁剪效果(基于3dtiles模型,附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  6. iOS与JS交互-WKWebView

    iOS移动端应用中,一般都会嵌入网页,在网页中处理的结果需要反馈给iOS让移动端做出相应的处理(例如页面跳转), 1.webview的配置 2.代理方法中拿到事件进行处理 二.JS中的配套出发事件 当 ...

  7. 记录Android开发中遇到的坑

    1. 出现错误提示:Intel HAXM is required to run this AVD,VT-x is disabled in BIOS的解决办法. 点击SDK图标,安装Intel x86 ...

  8. 安装上传下载插件,jdk及redis

    安装rz sz (1)编译安装root 账号登陆后,依次执行以下命令:cd /tmpwget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gzt ...

  9. 北航软件学院Java历届期末考题整理

    文章目录 abstract static Thread finally package Exception I/O 子类和父类 关键字 标识符 垃圾收集 数据类型 环境配置 网路编程 initial ...

  10. SQL高效运行注意事项(四)

    为了SQLSERVER能高效运行,SQLSERVER的磁盘子系统是一个重要的方面 Avg. Disk Sec/Read 这个计数器是指每秒从磁盘读取数据的平均值 下面的列表显示这个计数器值的范围,并指 ...