vue2 + element三级菜单实现模板

需求:

需要一个含有三级菜单的结构模板,用于业务快速开发。

解决:

sidebar.vue

<template><el-menu :default-active="defaultActive" class="el-menu-vertical-demo" active-text-color="#ffd04b"><template v-for="menu in menus"><el-submenu :index="menu.index" v-if="menu.children && menu.children.length > 0"><template slot="title"><i class="el-icon-menu"></i><span>{{ menu.name }}</span></template><template v-for="child in menu.children"><el-submenu :index="child.index" v-if="child.children && child.children.length > 0"><template slot="title">{{ child.name }}</template><el-menu-item v-for="subChild in child.children" :index="subChild.index" :key="subChild.index">{{subChild.name}}</el-menu-item></el-submenu><el-menu-item v-else :index="child.index">{{ child.name }}</el-menu-item></template></el-submenu><el-menu-item v-else :index="menu.index">{{ menu.name }}</el-menu-item></template></el-menu>
</template><script>
export default {data() {return {defaultActive: '1',menus: [{index: '1',name: '一级菜单1',children: [{index: '1-1',name: '二级菜单1-1',children: [{ index: '1-1-1', name: '三级菜单1-1-1' },{ index: '1-1-2', name: '三级菜单1-1-2' }]},{index: '1-2',name: '二级菜单1-2',children: [{ index: '1-2-1', name: '三级菜单1-2-1' },{ index: '1-2-2', name: '三级菜单1-2-2' }]}]},{index: '2',name: '一级菜单2',children: [{index: '2-1',name: '二级菜单2-1',children: [{ index: '2-1-1', name: '三级菜单2-1-1' },{ index: '2-1-2', name: '三级菜单2-1-2' }]}]}]};}
};
</script><style lang="less" scoped>
.el-menu {width: 287px;.el-menu-item {font-size: 16px;padding-left: 49px;&.is-active {//color: #fff;//background-color: #6c7c97;background-color: #fafafa;color: #409eff;}}
}.el-submenu /deep/ .el-submenu__title {font-size: 16px;
}.cuscRouter {// background-color: #fafafa;color: #409eff !important;
}
</style>

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

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

相关文章

『大模型笔记』2024大模型AI工程师必备技能!

2024大模型AI工程师必备技能! 文章目录 一. 2024大模型AI工程师必备技能!1. 引言:理解如何在各种应用中使用大语言模型(LLM)2. 第1层:Question answering(Q&A)3. 第2层:Chatbot=Q&A+短期记忆(上下文知识)4. 第3层:RAG=Q&A+短期记忆(上下文知识)+长期记忆(外…

【论文解读】CVPR2024:DUSt3R: Geometric 3D Vision Made Easy

论文“”https://openaccess.thecvf.com/content/CVPR2024/papers/Wang_DUSt3R_Geometric_3D_Vision_Made_Easy_CVPR_2024_paper.pdf 代码&#xff1a;GitHub - naver/dust3r: DUSt3R: Geometric 3D Vision Made Easy DUSt3R是一种旨在简化几何3D视觉任务的新框架。作者着重于…

Docker的架构原理

例子可以想象成一个买手机的场景 clien可以想象 你个人 docker deamon &#xff1a;店员 images&#xff1a; 样机 regisitry&#xff1a; 手机仓库 container: 使用的手机 首先我要在店员买一个手机&#xff0c;店员发现是样机&#xff0c;但是仓库有&#xff0c;&…

【SpringBoot3】使用Jasypt加密数据库用户名、密码等敏感信息

一、使用步骤介绍 使用Jasypt&#xff08;Java Simplified Encryption&#xff09;进行数据加密和解密主要涉及几个步骤&#xff0c;包括引入依赖、配置加密密码、加密敏感信息、将加密信息存储到配置文件中&#xff0c;以及应用程序启动时自动解密。以下是详细的使用说明&…

11 docker安装redis

目录 安装redis 1. 配置redis配置文件redis.conf 1.1. 找到redis.conf文件 1.2. 配置文件 2. 启动容器 3. 测试redis-cli连接 4. 证明docker使用的是指定的配置文件 安装redis 1. 配置redis配置文件redis.conf 1.1. 找到redis.conf文件 宿主机创建目录/app/redis在/a…

WebXR:Web上的虚拟与增强现实技术

WebXR 是一种允许在网页上创建虚拟现实 (VR) 和增强现实 (AR) 体验的技术标准&#xff0c;它结合了WebVR和WebAR的概念&#xff0c;为开发者提供了一个统一的平台来开发跨平台的沉浸式Web应用。 WebXR 概述 什么是WebXR&#xff1f; WebXR API 旨在让浏览器成为VR和AR内容的平…

双非怎么进大厂?

https://www.nowcoder.com/share/jump/2764630231719583704126 大家好&#xff0c;我是白露啊。 今天我们要分享一个非常励志的故事&#xff0c;它证明了双非背景的毕业生也可以通过努力和坚持&#xff0c;进入梦想中的大厂。 下面是这位网友的真实经历&#xff0c;希望能为正…

泰安再见,泰山OFFICE还会再见

路过泰安&#xff0c;遇见彩虹。怀念和感恩在泰山信息科技的万丈豪情。 泰山OFFICE&#xff0c;还是要复活。

JavaScript Set新增7个方法操作集合

intersection() intersection () 它返回一个包含此集合和给定集合中所有元素的新集合。 const odds new Set([1, 3, 5, 7, 9]);const squares new Set([1, 4, 9]);console.log(odds.intersection(squares)); // Set(2) { 1, 9 }union() union () 它返回一个包含此集合中所有元…

提升Android Studio开发体验:使用Kelp插件实现颜色和图标预览

提升Android Studio开发体验&#xff1a;使用Kelp插件实现颜色和图标预览 在Android开发中&#xff0c;自动补全功能对于提高开发效率至关重要。然而&#xff0c;默认的Android Studio并不能预览颜色和图标&#xff0c;这使得开发者在选择资源时常常感到困惑。本文将介绍如何使…

【C语言小知识】备选拼写:iso646.h头文件

备选拼写&#xff1a;iso646.h头文件 C语言中有3种逻辑运算符&#xff1a; 逻辑运算符含义&&与||或!非 假设exp1和exp2是俩个简单的关系表达式&#xff0c;那么 当且仅当exp1和exp2都为真时&#xff0c;exp1 && exp2才为真。如果exp1或exp2为真&#xff0c;…

【学习笔记】Fréchet距离的 C 语言实现

Frchet 距离 Frchet 距离&#xff0c;又称为弗雷歇距离&#xff0c;是一种衡量两条曲线&#xff08;或两个路径&#xff09;之间相似性的度量方法。这个概念最初在度量空间理论中被定义&#xff0c;后来被广泛应用于计算机科学、地理信息系统、图像处理、生物信息学等多个领域…

使用Python实现深度学习模型:迁移学习与领域自适应教程

引言 迁移学习和领域自适应是深度学习中的两个重要概念。迁移学习旨在将已在某个任务上训练好的模型应用于新的任务&#xff0c;而领域自适应则是调整模型以适应不同的数据分布。本文将通过一个详细的教程&#xff0c;介绍如何使用Python实现迁移学习和领域自适应。 环境准备…

Visual Studio常见问题

VS的文件路径为什么要用双斜杠(\)? 答:在编程时,写入文件的路径如image = cvLoadImage("C:\Users\lyb\Documents),这种写法在编译时不会报错,但在运行时会报错,报错图像读入为空,这是因为Windows的路径虽然用的是单斜杠,但在编程时的意义是不同的,单斜杠“\”…

Go语言中的可变参数:灵活而强大的函数参数

Go语言中的可变参数:灵活而强大的函数参数 在Go语言中,可变参数是一种非常有用的特性,它允许函数接受任意数量的参数。这种灵活性使得函数可以更加通用和可复用。本文将深入探讨Go语言中可变参数的用法、原理和最佳实践。 什么是可变参数? 可变参数允许你传递零个或多个值给…

LNMP架构搭建Discuz论坛

LNMP架构是一种用于搭建Web服务器环境的常用架构&#xff0c;由Linux、Nginx、MySQL和PHP组成 组成功能Linux作为操作系统的基础&#xff0c;提供稳定的环境Nginx作为反向代理服务器&#xff0c;处理客户端的请求并将他们转发给后端的应用服务器MySQL作为关系型数据库管理系统…

7.2 数据结构

作业 #include <stdio.h> #include <string.h> #include <stdlib.h> struct student {char name[32];int age;double score; }s[3];void stu_input(struct student *s,int n) {printf("请输入%d个学生的信息&#xff08;姓名&#xff0c;年龄&#xff0…

【服装识别系统】图像识别+Python+人工智能+深度学习+算法模型+TensorFlow

一、介绍 服装识别系统&#xff0c;本系统作为图像识别方面的一个典型应用&#xff0c;使用Python作为主要编程语言&#xff0c;并通过TensorFlow搭建ResNet50卷积神经算法网络模型&#xff0c;通过对18种不同的服装&#xff08;‘黑色连衣裙’, ‘黑色衬衫’, ‘黑色鞋子’, …

Python机器学习实战:利用决策树算法预测鸢尾花种类

引言 在人工智能领域&#xff0c;机器学习作为一种强大的工具正在改变我们对数据的认知和处理方式。Python因其丰富的机器学习库和直观易用的特性&#xff0c;成为了众多开发者首选的语言。本篇文章将带领大家深入了解如何运用Python中的scikit-learn库来构建决策树模型&#…

关系型数据库和矢量数据库分别适用于哪些领域?

关系型数据库和矢量数据库分别适用于哪些领域&#xff1f; 李升伟 关系型数据库适用于以下领域&#xff1a; 1. 金融行业&#xff1a;如银行的交易处理、账户管理等&#xff0c;对数据的一致性和事务处理要求极高。 2. 企业资源规划&#xff08;ERP&#xff09;&#xff1a…