从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战九(整体布局02)

使用el-menu和el-sub-menu及el-menu-item导航

src/layout目录下新增components目录,components目录下新增PageSidebar.vue
代码基本思想为:读取router中定义的routes数组,渲染绑定到el-menu。
el-menu和el-sub-menu及el-menu-item的区别,请参考本文最后一个图。

<template>
  <div>
    <el-menu :default-active="defaultActive" router :collapse="isCollapse">
      <template v-for="(item, i) in treeData" :key="item.path">
        <el-sub-menu  :index="item.path" v-if="item.children && item.children.length > 0">
          <template #title>
            <el-icon v-if="item.meta.icon"><component :is="item.meta.icon"></component></el-icon>
            <span>{{ item.name }}</span>
          </template>
          <template v-for="(child, ci) in item.children" :key="ci">
            <el-menu-item :index="child.path">
              <el-icon><component :is="child.meta.icon"></component></el-icon>
              {{ child.name }}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>
<script setup>
import { computed,ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

const treeData = router.getRoutes().filter((v) => v.meta && v.meta.requiresAuth);

const defaultActive = computed(() => route.path || treeData.value[0].path)
const isCollapse = ref(false)
</script>


修改布局文件

1717569146435.png

运行测试

1717569238885.png

区分el-menu和el-sub-menu及el-menu-item

1717569380224.png

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

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

相关文章

RNA-seq上下游分析snakemake流程

学习完snakemake后写的第一个流程是RNA-seq上游定量和下游的质控和差异分析。 使用fastp处理fastq文件&#xff0c;在使用START比对到基因组同时得到raw count&#xff0c;使用非冗余外显子长度作为基因的长度计算FPKM、TPM&#xff0c;同时也生成了CPM的结果。 非冗余外显子…

【单片机毕业设计选题24003】-基于STM32和阿里云的家庭安全监测系统

系统功能: 此设计采用STM32单片机采集环境温湿度,烟雾浓度和一氧化碳浓度显示在OLED上&#xff0c;并将这些信息上报至阿里云平台。 1. 上电连接手机热点后自动连接阿里云&#xff0c;可通过阿里云平台收到系统上报的温湿度&#xff0c;烟雾 浓度&#xff0c;一氧化碳数据以…

BGW总结

Java基础 Java概述 面向对象和面向过程的区别 面向过程性能比面向对象高&#xff0c;因为类调用时需要实例化&#xff0c;开销比较大 面向对象有封装、继承、多态性的特性&#xff0c;可以设计出低耦合的系统&#xff0c;使系统更加灵活、更加易于维护 三大特性 ①封装&a…

地面自动气象站的工作原理

TH-CQX10地面自动气象站是一种部署在地面上&#xff0c;用于监测和记录气象要素的自动化设备。能够自动观测、储存和发送气象数据的设备。它能够实时监测和记录温度、湿度、风速、风向、气压等多种气象参数&#xff0c;为气象监测、气候研究、农业生产、环境监测等领域提供准确…

C++中的结构体——结构体案例1_2

案例描述 学校正在做毕设项目&#xff0c;每位老师指导5名学生&#xff0c;总共有3名老师&#xff0c;需求如下 设计学生和老师的结构体&#xff0c;其中在老师的结构体中&#xff0c;有老师的姓名和一个存放5名学生的数组作为成员 学生的成员有姓名、考试分数&#xff0c;创…

Python写UI自动化--playwright(安装)

Playwright是微软推出的开源自动化测试工具&#xff0c;专为跨浏览器端到端测试设计。Playwright可以在多个浏览器引擎上运行测试&#xff0c;包括基于Chromium的浏览器&#xff08;如Chrome、Edge&#xff09;、Firefox和WebKit&#xff08;Safari的技术基础&#xff09;。支持…

信息收集---网站目录和CMS指纹识别

一. 网站目录收集 1. 常见网站敏感文件 网站的备份文件/数据库备份文件 wwwroot.zip Db.zip 后台登陆的目录 manage login 安装包&#xff08;源码&#xff09; 上传的目录uploads mysql的管理界面 phpmyadmin 程序的安装路径 2. Dirb 工具 工具介绍 dirb 是一款用…

【Spine学习06】之IK约束绑定,制作人物待机动画,图表塞贝尔曲线优化动作

引入IK约束的概念&#xff1a; 约束目标父级 被约束骨骼子集 这样理解更好&#xff0c;约束目标可以控制被约束的两个骨骼运作 IK约束绑定过程中呢&#xff0c;如果直接绑定最下面的脚掌骨骼会发生偏移&#xff0c;所以在开始处理IK之前&#xff0c;需要先设置一个ROOT结点下的…

自定义类型:枚举(enum)+联合体(union)

枚举联合体 一.枚举1.枚举类型的声明2.枚举类型的优点3.枚举类型的使用 二.联合体1.联合体类型的声明2.联合体的特点3.相同成员的结构体和联合体对比4.联合体大小的计算5.联合体的练习&#xff08;判断大小端&#xff09;6.联合体节省空间例题 一.枚举 1.枚举类型的声明 枚举…

HTML制作一个日蚀的动画特效

大家好&#xff0c;今天制作一个日蚀动画特效&#xff01; 先看具体效果&#xff1a; 使用一个逐渐扩大的圆形阴影来模拟月亮遮挡太阳的效果。使用了CSS的keyframes动画和border-radius属性来创建一个简单的圆形阴影效果。 HTML <!DOCTYPE html> <html lang"e…

Linux构建本地时间同步ntp

环境介绍&#xff1a; 主机名 IP地址 系统发行版 环境 Node01 192.168.100.102 Centos 7.4 可联网、已关闭防火墙selinux Node02 192.168.100.103 Centos 7.4 已关闭防火墙selinux 1.主节点同步阿里云标准时间 在保证连接外网的情况下&#xff0c;同步阿里服务器的…

Rust 实战丨SSE(Server-Sent Events)

&#x1f4cc; SSE&#xff08;Server-Sent Events&#xff09;是一种允许服务器向客户端浏览器推送信息的技术。它是 HTML5 的一部分&#xff0c;专门用于建立一个单向的从服务器到客户端的通信连接。SSE的使用场景非常广泛&#xff0c;包括实时消息推送、实时通知更新等。 S…

Linux2(文件类型分类 基本命令2 重定向)

目录 一、文件类型分类 二、基本命令2 1. find 帮助查询 2. stat 查看文件的信息 3. wc 统计文本 4. 查看文本内容 4.1 cat 4.2 more 4.3 less 4.4 head 4.5 tail 5. cal 显示日历 6. date 显示时间 7. du 文件大小 8. ln 链接 软链接 硬链接 区别 9. histo…

如何解除内存卡的写保护并格式化为exFAT文件系统

最近有客户提问内存卡提示写保护&#xff0c;且无法格式化为exFAT格式的问题&#xff0c;可能是由于多种原因引起的。以下是一些可能的解决方法&#xff1a; 1. 检查物理写保护开关 一些SD卡和MicroSD卡适配器上有一个小的物理开关&#xff0c;可以启用或禁用写保护。确保这个…

在Dataworks调度里检查上游表的分区是否已经产出

在Dataworks调度里检查上游表的分区是否已经产出 新建PyOdps3节点&#xff0c;贴如如下代码&#xff1a; import sys import time from datetime import datetimebizdate args[bizdate] if not o.exist_table(args[table]):sys.exit(1)# 设置结束时间为今天的20:00 end_time …

[项目推荐]EmoLLM-心理健康大模型

EmoLLM 是一系列能够支持理解用户-支持用户-帮助用户心理健康辅导链路的开源心理健康大模型&#xff0c;由LLM指令微调而来。它旨在全面理解和促进个体、群体乃至整个社会的心理健康状态。 项目介绍 GitHub&#xff1a;https://github.com/SmartFlowAI/EmoLLM 【EmoLLM项目提供…

30、 shell脚本进阶

shell脚本ifcase 一、条件测试 1.1、条件测试&#xff1a;$?----返回码&#xff0c;判断命令或者脚本是否执行成功&#xff08;最近的一条&#xff09; 0 true 为真就是成功 成立 非0 false 失败或者异常。 二、test命令 test命令&#xff1a;可以进行条件测试&#xff…

【SQL边干边学系列】07高级问题-3

文章目录 前言回顾高级问题41.逾期订单42.逾期订单-哪些员工&#xff1f;43.逾期订单与总订单相比44.逾期订单与总订单相比 - 丢失的员工45.逾期订单与总订单相比 - 修复null46.逾期订单与总订单之间的百分比47.逾期订单与总订单相比 - 修正decimal 答案41.逾期订单42.逾期订单…

Python Flask框架基础(七)留言板

本章示例程序是一个非常简单的留言板程序SayHello&#xff0c;涉及的知识完全是前面六个章节的内容 。这一章会基于这个程序介绍一种组织代码的形式&#xff0c;并了解Web程序开发流程&#xff0c;对前面六章的知识进行简单的回顾复习。 在具体的开发中&#xff0c;代码编写主…

AI大模型探索之路-实战篇:智能化IT领域搜索引擎之GLM-4大模型技术的实践探索

系列篇章&#x1f4a5; No.文章1AI大模型探索之路-实战篇&#xff1a;智能化IT领域搜索引擎的构建与初步实践2AI大模型探索之路-实战篇&#xff1a;智能化IT领域搜索引擎之GLM-4大模型技术的实践探索3AI大模型探索之路-实战篇&#xff1a;智能化IT领域搜索引擎之知乎网站数据获…