vue+iView 动态侧边栏菜单保持高亮选中

iview 组件在使用过程中,多多少少有一些小坑,本文简单罗列一二:

避坑指南: 关于iview 侧边栏菜单未能展开高亮选中回显问题
应用场景:iview-admin下接入动态菜单后,刷新或链接跳入时回显失效

简单就是两个方面:动态菜单接入前和动态菜单接入后菜单保持高亮选中问题。

一,动态菜单接入前:

本博客中有一篇文章简单介绍了 iView跳转子菜单父级菜单保持高亮的实现方法:

:active-name="$route.name" 
  <side-menu
          accordion
          ref="sideMenu"
          :active-name="$route.name"
          :collapsed="collapsed"
          @on-select="turnToPage"
          :menu-list="menuList">
 </side-menu>

菜单保持高亮选中

1,方法一:

跳转前页面的name保持一致,跳转页中meta中加

recoverName: ‘user-info’ // 和跳转前页面的name保持一致。

2,方法二:

:active-name="activeName()"
<side-menu
        accordion
        ref="sideMenu"
        :active-name="activeName()"
        :collapsed="collapsed"
        @on-select="turnToPage"
        :menu-list="menuList"
      >

method中加

activeName() {
          if (this.$route.meta.activeName){
               return this.$route.meta.activeName; 
          }else{
               return this.$route.name; 
          }
     },

这样两种方法都是没有问题的,但接入权限使用动态菜单时就存在一个问题:

刷新页面或使用链接跳转进入时就会出现跳转到首页,父菜单收起,子菜单未保持选中高亮

二,动态菜单接入后:

本博客中另一篇文章也简单介绍了 iview 动态渲染显示侧边栏菜单及获取选中数据,渲染方法:

:menu-list="menuList"

主要是动态菜单接入后,菜单高亮选中就会失效

main.vue 的mounted中接口动态获取菜单数据,渲染侧边栏菜单。

 store.dispatch('getMenuData').then(res => {
  }

菜单高亮选中失效问题解决方法:

我们可以通过方法 iview menu updateOpened updateActiveName属性:

updateOpened()
updateActiveName()
this.$refs.sideMenu.updateOpenName(this.$route.name);

在菜单请求后调用,但是必须在$nextTick里使用才有效

 store.dispatch('getMenuData').then(res => {
          if(this.$store.getters.menuList){
                this.$nextTick(() => {
                this.$refs.sideMenu.updateOpenName(this.$route.name);
                });
          }
    })

这样无论跳转还是强制刷新,侧边栏菜单是会展开的,但是选中的子菜单
依旧没有高亮选中回显

可以在side-menu侧边栏菜单组件中加updateActiveName属性方法更新

this.$refs.menu.updateActiveName() //保持高亮选中
updateOpenName (name) {
      if (name === this.$config.homeName) this.openedNames = []
      else this.openedNames = this.getOpenedNamesByActiveName(name)
      if(this.activeName){
          this.$nextTick(() => {
           this.$refs.menu.updateActiveName() //保持高亮选中
        })
      }
    },

三,部分主要代码:

1.main.vue中:

import SideMenu from "./components/side-menu";
    <Sider
      hide-trigger
      collapsible
      :width="200"
      :collapsed-width="64"
      v-model="collapsed"
      class="left-sider"
      :style="{overflow: 'hidden'}"
    >
      <side-menu
        accordion
        ref="sideMenu"
        :active-name="activeName()"
        :collapsed="collapsed"
        @on-select="turnToPage"
        :menu-list="menuList"
      >
      </side-menu>
    </Sider>

2.side-menu组件中

<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
      <template v-for="item in menuList">
        <template v-if="item.children && item.children.length === 1">
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ showTitle(item.children[0]) }}</span></menu-item>
        </template>
        <template v-else>
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
        </template>
      </template>
    </Menu>
    <div class="menu-collapsed" v-show="collapsed" :list="menuList">
      <template v-for="item in menuList">
        <collapsed-menu :center="true" v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
        <Tooltip transfer v-else :content="showTitle(item.children && item.children[0] ? item.children[0] : item)" placement="right" :key="`drop-menu-${item.name}`">
          <a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}"><common-icon :right="0" :size="item.size" :color="textColor" :type="item.icon || (item.children && item.children[0].icon)"/></a>
        </Tooltip>
      </template>
    </div>
  </div>
</template>
<script>
import SideMenuItem from './side-menu-item.vue'
import CollapsedMenu from './collapsed-menu.vue'
import { getUnion } from '@/libs/tools'
import mixin from './mixin'
export default {
  name: 'SideMenu',
  mixins: [ mixin ],
  components: {
    SideMenuItem,
    CollapsedMenu
  },
  props: {
    menuList: {
      type: Array,
      default () {
        return []
      }
    },
    collapsed: {
      type: Boolean
    },
    theme: {
      type: String,
      default: 'dark'
    },
    rootIconSize: {
      type: Number,
      default: 20
    },
    iconSize: {
      type: Number,
      default: 16
    },
    accordion: Boolean,
    activeName: {
      type: String,
      default: ''
    },
    openNames: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      openedNames: [],
    }
  },
  methods: {
    handleSelect (name) {
      this.$emit('on-select', name)
    },
    getOpenedNamesByActiveName (name) {
      return this.$route.matched.map(item => item.name).filter(item => item !== name)
    },
    updateOpenName (name) {
      if (name === this.$config.homeName) this.openedNames = []
      else this.openedNames = this.getOpenedNamesByActiveName(name)
      if(this.activeName){
          this.$nextTick(() => {
           this.$refs.menu.updateActiveName()
        })
      }
    },
  },
  computed: {
    textColor () {
      return this.theme === 'dark' ? '#fff' : '#495060'
    }
    
  },
  watch: {
    activeName (name) {
      if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)
      else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
    },
    openNames (newNames) {
      this.openedNames = newNames
    },
    openedNames () {
      this.$nextTick(() => {
        this.$refs.menu.updateOpened()
      })
    }
  },
  mounted () {
    this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
     
  }
}
</script>
<style lang="less">
@import './side-menu.less';
</style>

往期更多精彩:

1.vue+iView 权限实践之动态显示侧边栏菜单
2.vue+iView 跳转子菜单父级菜单保持高亮
3.vue+iView 树形菜单回显与选中
4.vue+iView 实现导入与导出excel功能
5.vue+iView table分页勾选记忆功能

喜欢就多多点赞关注。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/108939.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

进一步了解视频美颜SDK:美颜SDK的技术原理

美颜技术在当今的数字世界中变得越来越流行&#xff0c;尤其是在视频直播、社交媒体和视频通话应用中。用户寻求通过美颜效果增强自己的外观&#xff0c;这种需求催生了众多美颜SDK&#xff08;软件开发工具包&#xff09;的出现。这些SDK使开发者能够轻松地将美颜功能集成到他…

Error: no matching distribution found for tensorflow-cpu==2.6.*

目录 install_tensorflow()安装过程中遇到的问题 查找解决方案过程中&#xff1a; 解决办法&#xff1a; install_tensorflow()安装过程中遇到的问题 在服务器上安装tensorflow时&#xff0c;遇到了一个报错信息&#xff1a; 在网上找到一个类似的错误&#xff08;TensorFlow…

NlogPrismWPF

文章目录 Nlog&Prism&WPF日志模块实现原理添加配置注入服务应用测试其他模块怎么调用&#xff1f; Nlog&Prism&WPF 日志模块 介绍了为WPF框架Prism注册Nlog日志服务的方法 实现原理 无论是在WPF或者ASP.NET Core当中, 都可以使用ServiceCollection来做到着…

腾讯云轻量服务器地域选择教程,一篇文章就够了

腾讯云轻量应用服务器地域是指轻量服务器数据中心所在的地理位置&#xff0c;如上海、广州和北京等地域&#xff0c;如何选择地域&#xff1f;腾讯云百科txybk.com建议地域选择遵循就近原则&#xff0c;用户距离轻量服务器地域越近&#xff0c;网络延迟越低&#xff0c;速度就越…

66 内网安全-域横向批量atschtasksimpacket

目录 演示案例:横向渗透明文传递at&schtasks 案例2-横向渗透明文HASH传递atexec-impacket案例3-横向渗透明文HASH传递批量利用-综合案例5-探针主机域控架构服务操作演示 传递攻击是建立在明文和hash值的一个获取基础上的攻击&#xff0c;也是在内网里面常见协议的攻击&…

ZKP7.1 Polynomial Commitments Based on Error-correcting Codes (Background)

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 7: Polynomial Commitments Based on Error-correcting Codes (Yupeng Zhang) Recall: common paradigm for efficient SNARK A polynomial commitment scheme A polynomial interactive oracle proof (IOP) SNARK for gene…

Spring-声明式事务

声明式事务 一、简介1、准备工作2、测试 二、声明式事务概念1、编程式事务2、声明式事务3、基于注解的声明式事务1.测试无事务情况2.加入事务①Transactional注解标识的位置②事务属性&#xff1a;只读③事务属性&#xff1a;超时④事务属性&#xff1a;回滚策略⑤事务属性&…

信息系统项目管理师教程 第四版【第6章-项目管理概论-思维导图】

信息系统项目管理师教程 第四版【第6章-项目管理概论-思维导图】 课本里章节里所有蓝色字体的思维导图

基于springboot,vue校园社团管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatis-plus 本系…

共用体开发案例

有若干个人员的数据,其中有学生和教师。学生的数据中包括:姓名、号码性别、职业、班级。教师的数据包括:姓名、号码、性别、职业、职务。要求用同一个表格来处理。 #include <stdio.h>struct Person {char name[32];int age;char zhiYe;char addr[32];union {int class;…

D-LINK SQL注入漏洞让攻击者获得管理员权限

D-Link DAR-7000 设备中发现了一个名为 SQL 注入的安全漏洞。 SQL注入是一种恶意攻击&#xff0c;它利用Web应用程序中的漏洞注入恶意SQL语句并获得对数据库的未经授权的访问。 此技术允许攻击者查看、修改和删除数据库中的数据&#xff0c;这可能对数据的机密性、完整性和可…

私有云:架构图

私有云&#xff1a;架构图 1、架构图2、服务器分配及配置3、本地物理机hosts文件配置4、相关软件包5、本地物理机电脑配置参考【内存最好20G往上】 机缘巧合之下突然想玩玩虚拟化&#xff0c;然后就查资料本地自己搭建一套私有云 使用【VMware Workstation】这个虚拟化软件来进…

SpringMVC学习

一、SpringMvc 概述 1.什么是SpringMVC? ( •̀ ω •́ )✧&#xff1a; SpringMVC是基于MVC开发模式的框架&#xff0c;具备IOC和AOP MyBatis用来优化持久层&#xff0c; SpringMVC优化控制器。 spring是用来整合这两个框架 的框架

软考下午第一题 案列分析

期待分值 10&#xff0c;前三问12左右分&#xff0c;最后一题2、3分左右&#xff0c;重点在于拿下前面三题。 小心谨慎&#xff0c;不要大意。 数据流图 外部系统 数据存储 加工&#xff08;&#xff09;process 数据流 第二小题 说明给出存储名称&#xff0c;就使用该名称&…

vscode 保存 “index.tsx“失败: 权限不足。选择 “以超级用户身份重试“ 以超级用户身份重试。

vscode 保存 "index.tsx"失败: 权限不足。选择 “以超级用户身份重试” 以超级用户身份重试。 操作&#xff1a;mac在文件夹中创建文件&#xff0c;sudo 创建umiJs项目 解决&#xff1a;修改文件夹权限 右键文件夹

vueDay03——可灵活变动的class样式

一、需求背景 有时候我们需要对不同身份的用户在同一个组件上展示不同的样式&#xff08;界面这里暂且不谈&#xff09;&#xff0c;我们就需要控制该组件在不同的数据下呈现不同的样式 这时候我们就可以使用:class属性来动态调整样式 二、将class与style绑定 我们可以这样…

JavaScript_Pig Game保存当前分数

上个文章我们基本上完成了摇色子和切换当前玩家的功能。 现在我们开始写用户选择不再摇骰子的话&#xff0c;我们将用户的当前分数存入到持有分数中&#xff01; ● 首先我们应该利用一个数组去存储两个用户的分数 const scores [0, 0];● 接着我们利用数组来对分数进行累…

【CSS】CSS 属性计算过程

1. 概述 我们所书写的任何一个 HTML 元素&#xff0c;实际上都有完整的一整套 CSS 样式。如果没有修改某样式&#xff0c;大概率可能使用默认值。 例如&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…

论文写作框架示例:论软件系统建模方法及其应用

标题 前言题目要求写作框架(1)摘要(300~330字)(2)正文(2000~2500字,2200字左右为宜)(3)收尾(200字左右)前言 本章内容参考了51cto的薛老师的《软考论文高分特训与范文10篇》的内容,是帮助初学者打开写作思路的工具,而不是必须要遵循的模式。建议软考人多读多看…

Android14 WMS启动流程

一 概述 本文Android14源代码可参考&#xff1a;Search 在 Android 系统中&#xff0c;从设计的角度来看&#xff0c;窗口管理系统是基于 C/S 模式的。整个窗口系统分为服务端和客户端两大部分&#xff0c;客户端负责请求创建窗口和使用窗口&#xff0c;服务端完成窗口的维护…