el-menu 有一级二级三级菜单

news2024/11/15 15:29:58

效果如下
在这里插入图片描述

菜单代码如下

  <el-menu
          :default-active="menuDefaultActive"
          class="el-menu-box"
          :text-color="menuTextColor"
          :active-text-color="menuActiveTextColor"
          :unique-opened="true"
        >
          <!-- 一级菜单 -->
          <template v-for="item in appMenuInfoList">
            <el-submenu
              v-if="item.menuList && item.menuList.length"
              :index="item.onlyID"
              :key="item.index"
              class="second_menu"
            >
              <template slot="title">
                <i :class="item.icon" v-if="item.icon" />
                <span v-if="item.systemName">{{
                  item.systemName
                }}</span></template
              >
              <!-- 二级菜单 -->
              <template v-for="itemChild in item.menuList">
                <el-submenu
                  v-if="itemChild.menuList && itemChild.menuList.length"
                  :index="itemChild.onlyID"
                  :key="itemChild.index"
                  class="last_menu"
                >
                  <template slot="title"
                    ><span>
                      {{ itemChild.sysName || itemChild.systemName }}</span
                    ></template
                  >
                  <!-- 三级菜单 -->
                  <el-menu-item
                    v-for="itemChild_Child in itemChild.menuList"
                    :index="itemChild_Child.onlyID"
                    :key="itemChild_Child.index"
                    @click="handleMenuSelect(itemChild_Child)"
                  >
                    <span slot="title"
                      >{{
                        itemChild_Child.sysName || itemChild_Child.systemName
                      }}
                    </span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="itemChild.onlyID"
                  :key="itemChild.index"
                  @click="handleMenuSelect(itemChild)"
                  ><span slot="title">
                    {{ itemChild.sysName || itemChild.systemName }}</span
                  ></el-menu-item
                >
              </template>
            </el-submenu>
            <el-menu-item
              v-else
              :index="item.onlyID"
              :key="item.index"
              @click="handleMenuSelect(item)"
              ><span slot="title">
                {{ item.sysName || item.systemName }}</span
              ></el-menu-item
            >
          </template>
        </el-menu>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

线程池的核心参数有哪些???

线程池的核心参数包括以下七个&#xff1a; corePoolSize&#xff1a; 这是线程池中的核心线程数&#xff0c;即池中会保留的最少线程数。当提交任务时&#xff0c;如果当前线程数小于核心线程数&#xff0c;线程池会创建新的线程来执行任务。如果当前线程数等于或大于核心线程…

Docker - 简介

原文地址&#xff0c;使用效果更佳&#xff01; Docker - 简介 | CoderMast编程桅杆https://www.codermast.com/dev-tools/docker/docker-introduce.html Docker是什么&#xff1f; Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。 D…

css-Echarts图表初始显示异常非完全显示

1.echarts图表初始加载异常 2.问题原因 初次加载时&#xff0c;由于外层使用%比 echarts dom元素没有完全加载完成&#xff0c;canvas绘画继承本身宽高&#xff0c;造成Echarts图表初始显示异常非完全显示。 3.使用echarts图表可参考以下代码&#xff08;实现一定的自适应&am…

stm32开发之threadx+emwin+awizard使用记录

前言 图形化开发界面选择(awizard)emwin使用的版本是6.10芯片采用的是stm32f407zgt6这里使用的开发板是普中麒麟f4系列的 lcd驱动文件&#xff08;基于提供的源码修改&#xff09; 1、这里是剔除了很多兼容其他显示屏部分的代码&#xff0c;只保留具体信号的代码,把一些全局…

Java实现AVL树

AVI树 如果一颗二叉搜索树不平衡,那么搜索效率会受影响 二叉搜索树如果不是这种不平衡的情况,时间复杂度可以达到O(logn) 但是像图中的这种不平衡情况时间复杂度为O(n),那么如何解决呢? 可以通过旋转解决 旋转之后并不会破坏二叉搜索树的特性 判断是否平衡有一个规则:如果一…

如何进行景气分析

景气分析是一种短期经济分析方法。主要分析短时间内&#xff08;一般指一年内&#xff0c; 或几个月内&#xff09;经济运行的态势&#xff0c;包括当前的状态和未来的趋势。景气分析可以为宏观经济政策提供重要的决策与参考信息&#xff0c;例如根据经济运行的方向、强弱可建议…

【AI开发:音频】二、GPT-SoVITS使用方法和过程中出现的问题(GPU版)

1.FileNotFoundError: [Errno 2] No such file or directory: logs/guanshenxxx/2-name2text-0.txt 这个问题中包含了两个&#xff1a; 第一个&#xff1a;No module named pyopenjtalk 我的电脑出现的就是这个 解决&#xff1a;pip install pyopenjtalk 第二个&#xff1a…

数据结构练习-数据结构概述

----------------------------------------------------------------------------------------------------------------------------- 1. 在数据结构中&#xff0c;从逻辑上可以把数据结构分成( )。 A. 动态结构和静态结构 B. 紧凑结构和非紧凑结构 C. 线性结…

初识ansible变量及实例配置

目录 1、为什么要使用变量 2、变量分类 3、 变量详解 3.1 vars,vars_files , group_vars 3.1 .1 vars 剧本中定义变量 3.1.2 vars_file 将变量存放到一个文件中&#xff0c;并在剧本中引用 3.1.3 group_vars 创建一个变量文件给某个组使用 实例1-根据不同的主机…

CGLIB动态代理

文章目录 前言概要SpringBoot中使用小结 前言 当我们需要在Java中实现动态代理时&#xff0c;通常会考虑使用 JDK原生动态代理 或者 CGLIB动态代理。 我这里说一下CGLIB动态代理&#xff0c;并给出一个例子。 概要 CGLIB&#xff08;Code Generation Library&#xff09;是一…

无损以太网的ROCE革命,队列的缓存空间优化分析

ROCE无损以太网&#xff0c;队列的缓存空间优化 多级缓存架构优化芯片性能&#xff1a;* 缓存空间细分为芯片级、端口级和队列级&#xff0c;实现精细管理。* 无损队列引入Headroom缓存空间&#xff0c;确保数据完整性。 在芯片层面&#xff1a; 静态缓存为端口提供保证的缓存空…

RHCE:网络服务综合项目

基础配置&#xff1a; 1.配置主机名&#xff0c;静态IP地址 2.开启防火墙并配置 3.部分开启SElinux并配置 4.服务器之间使用同ntp.aliyun.com进行时间同步 5.服务器之间实现SSH免密登录 业务需求&#xff1a; 1.Server-NFS-DNS主机配置NFS服务器&#xff0c;将博客网…

智慧园区引领未来产业趋势:科技创新驱动园区发展,构建智慧化产业新体系

目录 一、引言 二、智慧园区引领未来产业趋势 1、产业集聚与协同发展 2、智能化生产与服务 3、绿色可持续发展 三、科技创新驱动园区发展 1、创新资源的集聚与整合 2、创新成果的转化与应用 3、创新文化的培育与弘扬 四、构建智慧化产业新体系 1、优化产业布局与结构…

5.SpringBoot 配置文件

文章目录 1.配置文件作用2.配置文件格式2.1项目中同时存在两种配置文件2.2application.properties2.2.1 application.properties语法格式2.2.2获取自定义配置项 2.3 application.yml2.3.1 application.yml语法格式2.3.1.1单双引号区别2.3.1.2和application.properties格式对比&…

安全狗云眼的主要功能有哪些?

"安全狗云眼"是一款综合性的网络安全产品&#xff0c;主要用于实时监控和保护企业的网络安全。其核心功能包括威胁检测、漏洞扫描、日志管理和合规性检查等。 以下是安全狗云眼的主要功能详细介绍&#xff1a; 1、资产管理 定期获取并记录主机上的Web站点、Web容器、…

Python连接Oracle数据库问题解决及Linux服务器操作知识

背景说明 最近在做一个视频分析的项目&#xff0c;然后需要将视频分析的数据写入到oracle数据库&#xff0c;直接在服务器上测试数据库连接的时候出现了这个bug提示&#xff0c;自己通过不断的研究探讨&#xff0c;最终把这个问题成功进行了解决&#xff0c;在这里进行一下记录…

【周总结】总结下这周的工作、(hashmap)知识巩固等

总结 这周开发任务已经全部结束&#xff0c;主要是在修改一些 jira 问题 需要反思的是&#xff0c;中间改造接口时&#xff0c;数据库表需要新增一个字段&#xff0c;这个 sql 脚本忘记加到 basetable.sql 脚本里面了&#xff0c;这样如果是新建的项目&#xff0c;创建的时候不…

HackMyVM-Hommie

目录 信息收集 arp nmap WEB web信息收集 dirsearch ftp tftp ssh连接 提权 系统信息收集 ssh提权 信息收集 arp ┌──(root㉿0x00)-[~/HackMyVM] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 08:00:27:77:ed:84, IPv4: 192.168.9.126 Starting arp-…

常见的经典目标检测算法

目标检测是计算机视觉领域的一个核心任务&#xff0c;它涉及到识别图像中的物体并确定它们的位置。以下是一些常见的经典目标检测算法&#xff1a; R-CNN系列 R-CNN&#xff08;Region-based Convolutional Neural Network&#xff09;是一种用于目标检测的算法&#xff0c;它…

未知个数一维数组:申请资源、初始化、访问、释放资源

示例&#xff1a; /*** brief how about array-unknown-count? show you here.* author wenxuanpei* email 15873152445163.com(query for any question here)*/ #define _CRT_SECURE_NO_WARNINGS//support c-library in Microsoft-Visual-Studio #include <stdio.h>…