11.添加侧边栏,并导入数据

news2024/12/21 23:16:45

修改CommonAside的代码:

<template>
  <div>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      :collapse="isCollapse">
  <!--
      <el-menu-item v-for="item in noChildren"  :key="item.name"  :index="item.name">

        <i :class="`el-icon-${item.icon}`"></i>

        <span slot="title">{{ item.label }}</span>
      </el-menu-item>
      -->
      <el-menu-item index="2">
        <!-- i标签是图标 -->
        <i class="el-icon-menu"></i>
        <!-- 导航的文字 -->
        <span slot="title">导航2</span>
      </el-menu-item>

      <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() {
        this.menuData.filter(item => !item.children)
      },
      //有子菜单
      hasChildren() {
        this.menuData.filter(item => item.children)
      }
    }
  }
</script>

 

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

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

相关文章

管理类联考——逻辑——形式逻辑——汇总篇——知识点突破——假言——各种假言

角度 多重假言 &#xff08;1&#xff09;如果A&#xff0c;那么B&#xff0c;除非C。 符号化为&#xff1a;┐C→ (A→B)。 等价于&#xff1a;┐C→ (┐A∨B)。 等价于&#xff1a;C∨(┐A∨B)。 等价于&#xff1a;C∨┐A∨B。 等价于&#xff1a;┐(C∨┐A&#xff09;→…

K8S自动化运维容器化(Docker)集群程序

K8S自动化运维容器化集群程序 一、K8S概述1.什么是K8S2.为什么要用K8S3.作用及功能 二、K8S的特性1.弹性伸缩2.自我修复3.服务发现和复制均衡4.自动发布和回滚5.集中化配置管理和秘钥管理6.存储编排7.任务批量处理运行 三、K8S的集群架构1.架构2.模式3.工作4.流程图 四、K8S的核…

电子电路原理题目整理(2)

半导体是一种既不是导体也不是绝缘体的材料&#xff0c;其中包含自由电子和空穴&#xff0c;空穴的存在使半导体具有特殊的性质。 1.为什么铜是电的良导体&#xff1f; 从原子结构来看&#xff0c;铜原子的价带轨道上有一个价电子&#xff0c;由于核心和价电子之间的吸引力很弱…

【zookeeper】zookeeper的shell操作

Zookeeper的shell操作 本章节将分享一些zookeeper客服端的一些命令&#xff0c;实验操作有助于理解zookeeper的数据结构。 Zookeeper命令工具 在前一章的基础上&#xff0c;在启动Zookeeper服务之后&#xff0c;输入以下命令&#xff0c;连接到Zookeeper服务。连接成功之后&…

Shell - 根据进程名过滤进程信息

文章目录 #/bin/bash #Function: 根据输入的程序的名字过滤出所对应的PID&#xff0c;并显示出详细信息&#xff0c;如果有几个PID&#xff0c;则全部显示 read -p "请输入要查询的进程名&#xff1a;" NAME Nps -aux | grep $NAME | grep -v grep | wc -l ##统计进程…

go学习part20(1)反射

283_尚硅谷_反射基本介绍和示意图_哔哩哔哩_bilibili 1.介绍 1&#xff09;基本数据类型的类型和类别一致&#xff0c;但是结构体等不一样。 2)反射的例子&#xff08;桥连接&#xff0c;序列化&#xff09; 序列化指定tag&#xff0c;会反射生成tag字符串 3&#xff09;refl…

【Alibaba中间件技术系列】「RocketMQ技术专题」RocketMQ消息发送的全部流程和落盘原理分析

RocketMQ目前在国内应该是比较流行的MQ 了&#xff0c;目前本人也在公司的项目中进行使用和研究&#xff0c;借着这个机会&#xff0c;分析一下RocketMQ 发送一条消息到存储一条消息的过程&#xff0c;这样会对以后大家分析和研究RocketMQ相关的问题有一定的帮助。 分析的总体…

如何增长LLM推理token,从直觉到数学

背景&#xff1a; 最近大模型输入上文长度增长技术点的研究很火。为何要增长token长度,为何大家如此热衷于增长输入token的长度呢&#xff1f;其实你如果是大模型比价频繁的使用者&#xff0c;这个问题应该不难回答。增长了输入token的长度&#xff0c;那需要多次出入才能得到…

【LeetCode】383. 赎金信 - hashmap/数组

这里写自定义目录标题 2023-8-28 22:54:39 383. 赎金信 2023-8-28 22:54:39 次数 ----> hashmap 和 数组来进行实现。 public class Solution {public boolean canConstruct(String ransomNote, String magazine) {// num 用于存储小写字母出现的次数int[] num new in…

vue报错RangeError: Maximum call stack size exceeded

这种情况&#xff0c;一般是跳转路由时发生此类错误&#xff0c;像我的就是如此。比如路由指向的vue文件里代码有错误&#xff0c;或者设置路由时重定向了路由自己&#xff0c;造成死循环。 1、首先检查自己跳转的路由地址的代码本身是否有语法错误之类的&#xff0c;造成错误…

如何实现的手机实景自动直播,都有哪些功能呢?

手机实景自动直播最近真的太火了&#xff0c;全程只需要一部手机&#xff0c;就能完成24小时直播带货&#xff0c;不需要真人出镜&#xff0c;不需要场地&#xff0c;不需要搭建直播间&#xff0c;只需要一部手机就可以了。真人语音讲解&#xff0c;真人智能回复&#xff0c;实…

「操作系统」1. 基础

前言&#xff1a;操作系统基础八股文 文章目录 一 、操作系统基础1.1 什么是操作系统&#xff1f;1.2 什么是系统调用1.3 什么是中断 &#x1f680; 作者简介&#xff1a;作为某云服务提供商的后端开发人员&#xff0c;我将在这里与大家简要分享一些实用的开发小技巧。在我的职…

腾讯云-对象存储服务(COS)的使用总结-JavaScript篇

简介 对象存储&#xff08;Cloud Object Storage&#xff0c;COS&#xff09;是腾讯云提供的一种存储海量文件的分布式存储服务&#xff0c;具有高扩展性、低成本、可靠安全等优点。通过控制台、API、SDK 和工具等多样化方式&#xff0c;用户可简单、快速地接入 COS&#xff0…

ChatGPT帮助高职院校学生实现个性化自适应学习与对话式学习

一、学习层面&#xff1a;ChatGPT帮助高职院校学生实现个性化自适应学习与对话式学习 1.帮助高职院校学生实现个性化自适应学习 数字技术的飞速发展引起了教育界和学术界对高职院校学生个性化自适应学习的更多关注和支持&#xff0c;其运作机制依赖于人工智能等技术&#xff0…

面经:微服务

文章目录 参考资料一. 微服务概述1. CAP理论2. BASE理论3. SpringBoot 与 SpringCloud对比 二. 服务注册&#xff1a;Zookeeper,Eureka,Nacos,Consul1. Nacos两种健康检查方式&#xff1f;2. nacos中负责负载均衡底层是如何实现的3. Nacos原理4. 临时实例和持久化(非临时)实例 …

微信小程序校园生活小助手+后台管理系统|前后分离VUE

《微信小程序校园生活小助手后台管理系统|前后分离VUE》该项目含有源码、文档等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&#…

【RISC-V】RISC-V寄存器

一、通用寄存器 32位RISC-V体系结构提供32个32位的整型通用寄存器寄存器别名全称说明X0zero零寄存器可做源寄存器(rs)或目标寄存器(rd)X1ra链接寄存器保存函数返回地址X2sp栈指针寄存器指向栈的地址X3gp全局寄存器用于链接器松弛优化X4tp线程寄存器常用于在OS中保存指向进程控…

金融风控数据分析-信用评分卡建模(附数据集下载地址)

本文引用自&#xff1a; 金融风控&#xff1a;信用评分卡建模流程 - 知乎 (zhihu.com) 在原文的基础上加上了一部分自己的理解&#xff0c;转载在CSDN上作为保留记录。 本文涉及到的数据集可直接从天池上面下载&#xff1a; Give Me Some Credit给我一些荣誉_数据集-阿里云…

数字化新零售平台系统提供商,门店商品信息智慧管理-亿发进销存

传统的批发零售业务模式正面临着市场需求变化的冲击。用户日益注重个性化、便捷性和体验感&#xff0c;新兴的新零售模式迅速崛起&#xff0c;改变了传统的零售格局。如何在保持传统业务的基础上&#xff0c;变革发展&#xff0c;成为了业界亟需解决的问题。 在这一背景下&…

Abaqus三维随机多面体插件—AbyssFish – Random Polyhedron Aggregate

插件介绍 AbyssFish – Random Polyhedron Aggregate 插件可在Abaqus软件内批量生成随机分布的三维多面体骨料模型。插件可指定骨料分布的区域、三种尺寸的粒径分布范围、多面体面数、各尺寸骨料的数量等信息&#xff0c;同时可控制骨料间的最小间距及插件的运行时间控制。 使…