使用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 ...
随机推荐
- 02-java性能调优-JVM内存模型详解
JVM整体结构与内存模型之间的关系 JVM整体结构图如下: 先贴一个代码: package com.jvm.jvmCourse2; public class Math { public static ...
- 关于hover与after,before已及first-letter,first-line的联用
0920自我总结 关于hover与after,before已及first-letter,first-line的联用 一.写法 元素:hover::after{样式} 元素:hover::before{ ...
- NIO基础方法一
1.remaining();返回当前位置与limit之间得元素数. int[] intArray={1,2,3,4}; IntBuffer intBuffer=IntBuffer.wrap(intAr ...
- 利用Azure虚拟机安装Dynamics 365 Customer Engagement之十:为SQL Server配置Always On
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- Python 類和對象 Class vs Object
類別定義 class 類別名: 例如: >>> class Point:... x = 0.0... y = 0.0 1. 宣告 >>> p1 = ...
- 【一】Gradle 初识
1.Gradle和Maven的对比 gradle 使用groovy语言,可以进行逻辑判断,maven基于xml,无法进行逻辑判断. gradle 可以在一个项目中,根据需求,生成2个不同的jar, m ...
- numpy中array和matrix的区别
两者相似但执行相同的运算可能得到不同的结果 显然,array只能通过dot()实现"矩阵乘法",array的"*"运算实现的是两个纬度相同的"矩阵&q ...
- RabbitMQ学习笔记(六、RabbitMQ进阶)
目录: 性能 存储机制 内存及磁盘告警 性能: 影响RabbitMQ性能的因素有很多,主要的分为硬件性能与软件性能. )硬件性能:如网络.内存.CPU等等. )软件性能:消息持久化.消息确认.路由算法 ...
- Win32 程序开发:创建一个应用程序窗口
一.创建一个应用程序窗口 代码如下: // 头文件 #include <windows.h> // 全局变量 WCHAR g_lpszClassName[] = L"CLASSN ...
- 图片(jpg,png,tif等)批量转dicom(dcm)格式
简介 医学领域专用工具,千金难求,可以批量把jpg.png.bmp.tif图片转换为dicom(dcm)格式,并且保持原有顺序,同时支持嵌入部分重要的dicom元数据,比如:病人姓名,病人生日等. 将 ...