<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. mybatis无效比较:invalid comparison:java.util.data and java.lang.string

    原因: 时间与空字符串比较是无效的,如果拿传入的时间类型参数与空字符串''进行对比则会引发invalid comparison:java.util.data and java.lang.string异 ...

  2. maven将xml文件一起打包

    pom文件配置 <build> <!-- 将mapper.xml一起打包 --> <resources> <resource> <director ...

  3. ASP.NET Core SignalR:基础概述

    一.简介 ASP.NET Core SignalR 是一个开源代码库,它简化了向应用添加实时 Web 功能的过程. 实时 Web 功能使服务器端代码能够即时将内容推送到客户端. SignalR 的适用 ...

  4. RabbitMQ与Spring的框架整合之Spring AMQP实战

    1.SpringAMQP用户管理组件RabbitAdmin. RabbitAdmin类可以很好的操作RabbitMQ,在Spring中直接进行注入即可.注意,autoStartup必须设置为true, ...

  5. C#函数的递归

    using System; namespace ConsoleApp3 { class Program { static void Main(string[] args) { ); Console.W ...

  6. windows平台多网卡设置路由

    添加路由命令: route add 192.168.4.0 mask 255.255.255.0 192.168.4.1 metric 20 if 11 -p 其中192.168.4.0 是网络目标, ...

  7. python 使用tesseract进行图片识别

    from PIL import Image import pytesseract text = pytesseract.image_to_string(Image.open(r'E:\guo\2432 ...

  8. MySQL逻辑控制语句的使用

    一.IF语句     1).   IF(expr1,expr2,expr3) 如果expr1为true则结果为expr2否则为expr3 -->相当于三元运算符                  ...

  9. 利用css将英文转为大写或小写

    项目需要在后台接收的字段值为小写,但在页面上显示大写英文,但操作页面之后,最终传给后台的依旧是小写,所以就需要使用css转化一下即可 <li>This.is.a.book,全部转为大写:& ...

  10. 【Android】Android多渠道打包--Gradle打包

    Android多渠道打包--Gradle打包 前言 由于App一般都会在多个应用市场上架,为了分析App在每个不同渠道的具体的数据,一般都会对不同渠道打包不同的App.多渠道打包有多种方式,这里只介绍 ...