P13 VUE 二级menu实现

news2024/10/6 16:17:29

主要修改以下几个点:

CommonAside.vue中 

外层便利有孩子节点,关键词key是对应的标签,class动态图表渲染

内层遍历不能再用item,用subitem,遍历该item.childeren,关键词是path, 

<template>
  <div>
    <el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    >
      <!-- 无子页 -->
      <el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name">
        <!-- i标签是图标 -->
        <!-- 静态渲染 -->
       <!-- <i :class="el-icon-menu"></i> -->
        <!-- 动态渲染 -->
        <i :class="`el-icon-${item.icon}`"></i>
        <!-- 导航的文字 -->
        <span slot="title">{{item.label}}</span>
      </el-menu-item>

      <!-- 有子页 -->
      <!-- 一级渲染 -->
      <el-submenu v-for="item in hasChildren" :key="item.label" :index="item.label">
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{ item.label }}</span>
        </template>
        <!-- 二级渲染 -->
        <el-menu-item-group v-for="subitem in item.children" :key="subitem.path" >
          <el-menu-item :index="subitem.path">{{ subitem.label }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
     <!--
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">导航一</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu> -->



    </el-menu>
  </div>
</template>


<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

<script>
  export default {
    data() {
      return {
        isCollapse: false,
        menuData: [
          {
            path: '/',
            name: 'home',
            label: '首页',
            icon: 's-home',
            url: 'Home/Home'
          },
          {
            path: '/mall',
            name: 'mall',
            label: '商品管理',
            icon: 'video-play', //图标
            url: 'MallManage/MallManage'
          },
          {
            path: '/user',
            name: 'user',
            label: '用户管理',
            icon: 'user',
            url: 'UserManage/UserManage'
          },
          {
            label: '其他',
            icon: 'location',
            children: [{
                path: '/page1',
                name: 'page1',
                label: '页面1',
                icon: 'setting',
                url: 'Other/PageOne'
              },
              {
                path: '/page2',
                name: 'page2',
                label: '页面2',
                icon: 'setting',
                url: 'Other/PageTwo'
              }
            ]
          }
        ]

      };
    },

    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },

    computed:{
      //无子菜单
      noChildren() {
        return  this.menuData.filter(item => !item.children)
      },
      //有子菜单
      hasChildren() {
        return this.menuData.filter(item => item.children)
      }
    },
  }
</script>

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

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

相关文章

java 批量下载将多个文件(minio中存储)压缩成一个zip包

我的需求是将minio中存储的文件按照查询条件查询出来统一压成一个zip包然后下载下来。 思路&#xff1a;针对这个需求&#xff0c;其实可以有多个思路&#xff0c;不过也大同小异&#xff0c;一般都是后端返回流文件前端再处理下载&#xff0c;也有少数是压缩成zip包之后直接给…

【C++设计模式】详解装饰模式

2023年8月31日&#xff0c;周四上午 这是我目前碰到的最难的设计模式..... 非常难以理解而且比较灵活多半&#xff0c;学得贼难受&#xff0c;写得贼费劲..... 2023年8月31日&#xff0c;周四晚上19:48 终于写完了&#xff0c;花了一天的时间来学习装饰模式和写这篇博客。 …

《Kubernetes部署篇:Ubuntu20.04基于二进制安装安装kubeadm、kubelet和kubectl》

一、背景 由于客户网络处于专网环境下&#xff0c; 使用kubeadm工具安装K8S集群&#xff0c;由于无法连通互联网&#xff0c;所有无法使用apt工具安装kubeadm、kubelet、kubectl&#xff0c;当然你也可以使用apt-get工具在一台能够连通互联网环境的服务器上下载kubeadm、kubele…

说说Kappa架构

分析&回答 对于实时数仓而言&#xff0c;Lmabda架构有很明显的不足&#xff0c;首先同时维护两套系统&#xff0c;资源占用率高&#xff0c;其次这两套系统的数据处理逻辑相同&#xff0c;代码重复开发。 能否有一种架构&#xff0c;只需要维护一套系统&#xff0c;就可以…

【核磁共振成像】相位差重建

目录 一、相位差map重建一般步骤和反正切函数主值范围二、反正切运算三、可预期相位误差和伴随场的校正四、图形变形校正 一、相位差map重建一般步骤和反正切函数主值范围 MRI是一个相敏成像模态&#xff0c;MR原始数据傅里叶变换后的复数图像中每个像素值有模和相位。标准模重…

HTML5

写在前面 一、开个头 安装vscode 1.1 什么是网页 网站是指因特网上根据一定的规则&#xff0c;使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”&#xff0c;通常是HTML格式的文件&#xff0c;它要通过浏览器来阅读。 网页是构成网站的基本元素…

uniapp 微信小程序 锚点跳转

uniapp文档 以下是我遇到的业务场景&#xff0c;是点击商品分类的某一类 然后页面滚动至目标分类&#xff0c; 首先第一步是设置锚点跳转的目的地&#xff0c;在目标的dom上面添加id属性 然后给每个分类每一项添加点击事件&#xff0c;分类这里的item数据里面有一字段是和上…

OpenCV(三):Mat类数据的读取

目录 1.Mat类矩阵的常用属性 2.Mat元素的读取 1.at方法读取Mat矩阵元素 at (int row,int col) 2.矩阵元素地址定位方式访问元素 3.Android jni demo 1.Mat类矩阵的常用属性 下面是一些Mat类的常用属性&#xff1a; rows: 返回Mat对象的行数。 cols: 返回Mat对象的列数。 …

SpringMVC概述与简单使用

1.SpringMVC简介 SpringMVC也叫做Spring web mvc,是 Spring 框架的一部分&#xff0c;是在 Spring3.0 后发布的。 2.SpringMVC优点 1.基于 MVC 架构 基于 MVC 架构&#xff0c;功能分工明确。解耦合&#xff0c; 2.容易理解&#xff0c;上手快&#xff1b;使用简单。 就可以…

AttributeError: ‘ConfigDict‘ object has no attribute ‘log_level‘

运行 python tools/train.py configs/pspnet/pspnet_r50-d8_512x512_80k_ade20k.py 时出现 问题 Traceback (most recent call last):File "tools/train.py", line 242, in <module>main()File "tools/train.py", line 167, in mainlogger get_ro…

0基础学习VR全景平台篇 第94篇:智慧景区浏览界面介绍

一、景区详细信息介绍 点击左上角的图标就可以看到景区详细信息例如景区简介&#xff0c;地址&#xff0c;开放信息&#xff0c;联系电话等 二、问题反馈中心 点击左下角的【问题反馈】按钮向作者进行问题反馈 三、开场地图 1、直接点击开场地图页面上的图标浏览该场景 2、通…

Java流数据

流数据 可以从不同的角度对流进行分类&#xff1a; 处理的数据单位不同&#xff0c;可分为&#xff1a;字符流&#xff0c;字节流 2.数据流方向不同&#xff0c;可分为&#xff1a;输入流&#xff0c;输出流 3.功能不同&#xff0c;可分为&#xff1a;节点流&#xff0c;处理…

【golang】简单介绍下goroutine

前面的两篇&#xff0c;从相对比较简单的锁的内容入手(也是干货满满)&#xff0c;开始了go的系列。这篇开始&#xff0c;进入更核心的内容。我们知道&#xff0c;go应该是第一门在语言层面支持协程的编程语言(可能是我孤陋寡闻)&#xff0c;goroutine也完全算的上是go的门面。g…

【微服务】服务发现和管理技术框架选型调研

选型背景 方案对比 结论 结合实际业务和开发需要&#xff0c;着重考虑性能可靠性、功能和社区支持程度三方面&#xff0c;认为Nacos更适合作为服务发现和管理的技术框架。具体理由如下&#xff1a; 性能更好&#xff0c;可靠性更高 经过阿里、APISIX、SpringCloudAlibaba,阿…

opencv案例06-基于opencv图像匹配的消防通道障碍物检测与深度yolo检测的对比

基于图像匹配的消防通道障碍物检测 技术背景 消防通道是指在各种险情发生时&#xff0c;用于消防人员实施营救和被困人员疏散的通道。消防法规定任何单位和个人不得占用、堵塞、封闭消防通道。事实上&#xff0c;由于消防通道通常缺乏管理&#xff0c;导致各种垃圾&#xff0…

1688API技术解析,实现关键词搜索淘宝商品(商品详情接口等)批量获取,可高并发

要使用1688API接口采集商品详情&#xff0c;可以按照以下步骤进行&#xff1a; 获取API接口权限&#xff1a;申请1688的app key和app secret&#xff0c;并获取access_token。 编写API请求代码&#xff1a;使用Python等编程语言&#xff0c;编写API请求代码。以下是一个Python…

【陈老板赠书活动 - 11期】- 【MySQL从入门到精通】

![ 陈老老老板&#x1f9b8; &#x1f468;‍&#x1f4bb;本文专栏&#xff1a;赠书活动专栏&#xff08;为大家争取的福利&#xff0c;免费送书&#xff09; &#x1f468;‍&#x1f4bb;本文简述&#xff1a;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f468;‍…

【数据分享】2006-2021年我国省份级别的集中供热相关指标(免费获取\20多项指标)

《中国城市建设统计年鉴》中细致地统计了我国城市市政公用设施建设与发展情况&#xff0c;在之前的文章中&#xff0c;我们分享过基于2006-2021年《中国城市建设统计年鉴》整理的2006—2021年我国省份级别的市政设施水平相关指标、2006-2021年我国省份级别的各类建设用地面积数…

无涯教程-Android - ToggleButton函数

ToggleButton将已选中/未选中状态显示为按钮。它基本上是一个带有指示灯的开/关按钮。 Toggle Button ToggleButton属性 以下是与ToggleButton控件相关的重要属性。您可以查看Android官方文档以获取属性的完整列表以及可以在运行时更改这些属性的相关方法。 Sr.No.Attribute…

【高性能计算】opencl语法及相关概念(四):结合opencv进行图像高斯模糊处理

目录 高斯模糊简介主函数&#xff1a;host端设备端函数&#xff1a;mywork.cl效果图对比 高斯模糊简介 高斯模糊是一种常用的图像处理技术&#xff0c;用于减少图像中的噪点和细节&#xff0c;并实现图像的平滑效果。它是基于高斯函数的卷积操作&#xff0c;通过对每个像素周围…