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

news/2024/11/28 13:30:14/

修改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.ppmy.cn/news/1077403.html

相关文章

报文信息转换器

HttpMessageConverter HttpMessageConverter:报文信息转换器&#xff0c;将请求报文转换为Java对象&#xff0c;或将Java对象转换为响应报文。它提供了两个注解和两个类型&#xff1a; RequestBody, ResponseBody, RequestEntity, ResponseEntity(响应用的较多) 准备 创建模块并…

【MySQL】从哪几个角度分析数据库失败的原因?

总体评估MySQL服务器感谢 &#x1f496; 总体评估 当发现数据库出现问题时&#xff0c;我们首先应该从全局的角度考虑架构中的所有组件。包括&#xff1a; 服务器&#xff08;数据库和应用程序&#xff09; 存储&#xff1a;存储故障可能导致关键信息丢失网络接口&#xff1a…

爬取双色球数据做频次分析

上代码&#xff1a; import requests from lxml import etree import pandas as pddef get_url(url): # 请求url的方法&#xff0c;返回htmlheaders {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 S…

算法通关村第十二关——不简单的字符串转换问题

前言 字符串是我们在日常开发中最常处理的数据&#xff0c;虽然它本身不是一种数据结构&#xff0c;但是由于其可以包含所有信息&#xff0c;所以通常作为数据的一种形式出现&#xff0c;由于不同语言创建和管理字符串的方式也各有差异&#xff0c;因此针对不同语言特征又产生…

多线程笔记: volatile、synchronized、Monitor等

为什么非volatile变量也有线程可见性&#xff1f;不加volatile也可以看到变量变化是为什么&#xff1f;Thread.sleep() 和 System.out.println() 与内存可见性的影响Thread.sleep() 对线程可见性的影响&#xff1f;Java中的Monitor监视器是什么&#xff1f; Slf4j public clas…

说说Flink on yarn的启动流程

分析&回答 核心流程 FlinkYarnSessionCli 启动的过程中首先会检查Yarn上有没有足够的资源去启动所需要的container&#xff0c;如果有&#xff0c;则上传一些flink的jar和配置文件到HDFS&#xff0c;这里主要是启动AM进程和TaskManager进程的相关依赖jar包和配置文件。接着…

【DevOps视频笔记】6 - 7. Jenkins 介绍 和 安装

一、Integrate 工具 二、Jenkins 介绍 1. Jenkins 最主要的工作 2. CI / CD 可以理解为&#xff1a; 2.1 CI 过程 2.2 CD 过程 三、Jenkins 安装 1. 安装准备工作 2. 安装 Jenkins Stage 1&#xff1a;拉取 jenkins 镜像 Stage 2&#xff1a;编写docker-compose.yml St…

【深度学习】实验05 构造神经网络示例

文章目录 构造神经网络1. 导入相关库2. 定义一个层3. 构造数据集4. 定义基本模型5. 变量初始化6. 开始训练 构造神经网络 注明&#xff1a;该代码用来训练一个神经网络&#xff0c;网络拟合y x^2-0.5noise&#xff0c;该神经网络的结构是输入层为一个神经元&#xff0c;隐藏层…