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

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

菜单代码如下

  <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>

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

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

相关文章

常见排序算法(插入排序,希尔排序,选择排序,堆排序,冒泡排序,快速排序,归并排序,计数排序,基数排序,桶排序)

一.排序的概念 1.排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作 2.稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经过排…

STM32 HAL库 利用CH376进行USB文件读写

STM32 其实可以进行读取USB文件,但仅限于F4以上芯片才可以进行SUB文件读写,但在项目开发中,往往用不到此芯片,那么只能通过外挂的USB芯片进行USB文件读写,本文则是采用STM32F103的SPI与CH376进行通信,通过CH376操作指令进行操作。 1、CH376介绍 CH376芯片 是沁恒的一款文…

paho-mqtt 库揭秘

文章目录 **paho-mqtt 库揭秘**第一部分&#xff1a;背景介绍第二部分&#xff1a;paho-mqtt 是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解决方案第七部…

如何批量给Word文件增加前缀序号?“汇帮批量重命名”帮助你批量给word文件增加前缀序号。

批量给Word文件增加前缀序号的过程&#xff0c;对于经常处理大量文档的人来说&#xff0c;是一项既繁琐又必要的任务。首先&#xff0c;我们需要明确为什么要给Word文件增加前缀序号。在很多情况下&#xff0c;当我们需要按照一定的顺序对多个文档进行管理和归档时&#xff0c;…

海绵结构:Hash as RO

参考文献&#xff1a; [BDPA07] Bertoni G, Daemen J, Peeters M, et al. Sponge functions[C]//ECRYPT hash workshop. 2007, 2007(9).[GPP11] Guo J, Peyrin T, Poschmann A. The PHOTON family of lightweight hash functions[C]//Advances in Cryptology–CRYPTO 2011: 31…

MBD_入门篇_19_Simulink数学运算模块

19.Simulink数学运算模块 19.1 概述 数学运算模块&#xff0c;包含了一些数学运算&#xff0c;比如最常用的加减乘除等。 19.2 Add加法模块 设置加法模块的形状&#xff0c;默认是方形的&#xff0c;推荐使用方形的。 运算符设置。 设置符号为-&#xff0c;可以理解为本来是0,…

CSS 设置空格原样显示 white-space:pre-wrap;

CSS 设置空格原样显示 问题描述 html 渲染内容时&#xff0c;对于 空格、回车、Tab 键的 默认处理方式是 &#xff1a; 无论存在多少个连续的空格&#xff0c;都只会保留一个。 结论 由于以上的特性&#xff0c;导致了我们无法直接渲染出原格式的文本。pre 标签 了解一下 &…

今日刷三题(day4):简写单词+dd爱框框+除2!

题目一&#xff1a;简写单词 题目描述&#xff1a; 比如 “College English Test”可以简写成“CET”&#xff0c;“Computer Science”可以简写为“CS”&#xff0c;“I am Bob”简写为“IAB” 输入输出描述&#xff1a; 输入&#xff1a;一个复合单词 输出&#xff1a;输…

20240330-1-词嵌入模型w2v+tf-idf

Word2Vector 1.什么是词嵌入模型&#xff1f; 把词映射为实数域向量的技术也叫词嵌⼊ 2.介绍一下Word2Vec 谷歌2013年提出的Word2Vec是目前最常用的词嵌入模型之一。Word2Vec实际是一种浅层的神经网络模型&#xff0c;它有两种网络结构&#xff0c;分别是连续词袋&#xff…

C++ stl容器stack,queue,priority_queue的底层模拟实现

目录 前言&#xff1a; 文档借鉴&#xff1a;Reference - C Reference 1.deque a.deque的结构特点&#xff1a; b.deque的迭代器结构&#xff1a; c.面试题&#xff1a; 2.stack 3.queue 4.仿函数 5.priority_queue 总结&#xff1a; 前言&#xff1a; 本篇一共简单…

Hive 中常用的函数以及数据类型

数据类型 1.基本数据类型: 数据类型大小范围示例TINYINT1byte-128 ~ 127100YSMALLINT2byte-32768 ~ 32767100SINT4byte-2^32~ 2^32-1100BIGINT8byte-2^64~ 2^64-1100LFLOAT4byte单精度浮点数5.21DOUBLE8byte双精度浮点数5.21DECIMAL-高精度浮点数DECIMAL(9,8)BOOLEAN-布尔型tr…

VF02 XBLNR增强将不可编辑状态改为可编辑状态

VF02 XBLNR增强将不可编辑状态改为可编辑状态 一、业务界面展示 二、在程序SAPMV60A的INCLUDE程序MV60AF0F_FELDAUSWAHL_SONDERREG增强 *$*$-Start: ZEN_POINT_TEST1---------------------------------------------------------------------$*$* ENHANCEMENT 1 ZFI_TEST01.…

C语言 | 自定义类型:联合和枚举

目录&#xff1a; ----前言 1. 联合体 1.1 联合体类型的声明 1.2 联合体的特点 1.3 相同成员的结构体和联合体对比 1.4 联合体大小的计算 1.5 联合的使用 1.6联合体的练习 2. 枚举 2.1 枚举类型的声明 2.2 枚举类型的优点 2.3 枚举类型的使用 --前言&#xff1a; c语言中内…

代码随想录刷题随记24-回溯

代码随想录刷题随记24-回溯 491. 非递减子序列 leetcode链接 与之前的集合问题不同&#xff0c;而本题求自增子序列&#xff0c;是不能对原数组进行排序的&#xff0c;排完序的数组都是自增子序列了。所以不能通过排序的问题去重 class Solution {List<List<Integer…

超越GPT-4V,苹果多模态大模型上新,神经形态计算加速MLLM(二)

上文介绍基于MINOnets神经网络架构加速多模态大模型的策略&#xff0c;本文将以Spinnaker2多核神经网络芯片EGRU架构为起点&#xff0c;覆盖存内计算架构&#xff0c;介绍新型计算架构在加速大模型推理的作用。SpiNNaker 2是一个设计用于大规模异步处理的多核神经形态芯片&…

建议收藏 | 2023年中国SCI期刊影响因子最新预测

公众号&#xff1a;生信漫谈&#xff0c;获取最新科研信息&#xff01; 2023年中国SCI期刊影响因子最新预测 经过Web of Science 官网对引用前50和IF排名前50的中国&#xff08;包括香港、澳门和台湾&#xff09;期刊以及中国主办或中国人主编的高影响力期刊进行了2023年影响…

数据结构_时间复杂度

✨✨所属专栏&#xff1a;数据结构✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 什么是时间复杂度&#xff1f; 时间复杂度的定义&#xff1a;在计算机科学中&#xff0c;算法的时间复杂度是一个函数&#xff0c;它定量描述了该算法的运行时间。一个算法执行所耗费的时间&#xff0…

YOLO世界:实时开放词汇对象检测

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;YOLO世界&#xff1a;实时开放词汇对象检测1、研究背景2、提出方法3、相关技术3.1、Re-parameterizable Vision-Language Path Ag…

MySQL中InnoDB存储引擎详细介绍

介绍 InnoDB是一种兼顾高可靠性高和高性能的通用存储引擎&#xff0c;在MySQL5.5之后&#xff0c;InnoDB是默认的MySQL存储引擎。 特点 DML(增删改)操作遵循ACID(事务四大特性)模型&#xff0c;支持事务&#xff1b;行级锁&#xff0c;提高并发访问性能支持外链FORELGN KEY约…

Jenkins服务器IP更换,Jenkins URL地址更换

服务器的网络地址发生变动&#xff0c;修改jenkins服务器IP地址后&#xff0c;jenkins网页能够打开&#xff0c;但是job中的配置钩子没有自动改变&#xff0c;如图所示&#xff1a; 经过查询资料了解&#xff0c;需要修改jenkins本地化配置地址才可以显示正确&#xff1a; 1、…