14、springboot3 vue3开发平台-前端-自定义菜单组件,根据路由动态渲染

news2024/11/24 16:49:44

文章目录

  • 1. 组件
  • 2 . 使用示例

1. 组件

src\components\menuTree\index.vue

<template>
    <template v-for="item in menuList">
        <!-- 分为两种方式渲染:有子菜单和没有子菜单-->
        <!--      没有子菜单-->
        <el-menu-item :index="item.path" v-if="item.children.length == 0" :key="item.path"
            @click="handleRouter(item)">
            <el-icon v-if="item.icon"><svg-icon slot="prefix" :name="item.icon" width="18px" height="18px" /></el-icon>
            <span>{{ item.menuName }}</span>
        </el-menu-item>

        <el-sub-menu :index="item.path" v-if="item?.children?.length > 0" >
            <template #title>
                <el-icon v-if="item.icon"><svg-icon slot="prefix" :name="item.icon" width="18px" height="18px" /></el-icon>
                <span @click="handleSubMenu($event, item)">{{ item.menuName }}</span>
            </template>
            <!--        有子菜单的继续遍历(递归)-->
            <MenuTree :menuList="item.children" ></MenuTree>
        </el-sub-menu>
    </template>
</template>
<script setup lang="ts" >
// 声明 props - 对象格式  在script 中不使用props拿不到数据, <template>中自动解构

const props = defineProps({
    menuList: Array<any>
})

// 定义要触发的事件  
const emit = defineEmits(['childEvent'])

// 切换路由
const handleRouter = (menu: any) => {
    emit('childEvent', { type: 'menuItem', item: menu })
}

// 目录被点击
const handleSubMenu = (event: Event, menu: any) => {
    let event1 = event.currentTarget
    let event2 = event.target
    if (event1 == event2) {
        emit('childEvent', { type: 'subMenu', item: menu })
    }
}

</script>
<script>
export default {
    name: "MenuTree"
}
</script>

注1: 组件自递归要使用时要导出
注2: 这里使用的图标是之前自定义的图标组件

<script>
export default {
    name: "MenuTree"
}
</script>

2 . 使用示例

在父组件中:

<MenuTree :menuList="menuList" @childEvent="handChildEvent"></MenuTree>

// 获取pinia的缓存的菜单数据, 这里数据来源根据自己实际来获取
const menuList = menuStore.menuList

// 子组件事件逻辑根据实际来定义
const handChildEvent = (data: any) => {
    let menu = data.item
    if (data.type == 'menuItem') {
        // 向tabList中添加数据,检查是否已经添加  数据结构:{title:'首页',path:'/index'}
        let hasNode = menuStore.tabList.filter((item: any) => item.path == menu.path)
        if (hasNode == null || hasNode.length == 0) {
            let data = { title: menu.menuName, path: menu.path, id: menu.id, menuName: menu.menuName, parentId: menu.parentId }
            menuStore.setTabList(data)
        }
        // 修改activeTab的值
        menuStore.setActive(menu.path)
        // 缓存面包屑数据
        menuStore.addBreadList(menu)
    } 
    if (data.type == 'subMenu') {
        menuStore.addBreadList(menu)
    }
}

在这里插入图片描述

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

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

相关文章

linux cpu问题排查及性能优化

cpu性能 一、cpu啥时候才叫有瓶颈 cpu运行的快还是慢、cpu有没有问题&#xff0c;cpu是不是还需要优化。这些是平常开发和运维中经常遇到的问题。那么我门到底如何去判断机器cpu运行的到底有没有异常呢。 从我排查问题来说&#xff0c;单看系统指标不能完全反应应用运行的状态…

移动魔百盒刷机教程

准备工作 确认型号&#xff1a;首先确认您的魔百盒的具体型号&#xff0c;不同的型号可能需要不同的刷机包。刷机包&#xff1a;下载适合您型号的刷机包。U盘&#xff1a;准备一个容量不超过8GB的U盘&#xff0c;并将其格式化为FAT32格式。刷机工具&#xff1a;根据型号可能需…

深度学习实战:手把手教你构建多任务、多标签模型

多任务多标签模型是现代机器学习中的基础架构&#xff0c;这个任务在概念上很简单 -训练一个模型同时预测多个任务的多个输出。 在本文中,我们将基于流行的 MovieLens 数据集,使用稀疏特征来创建一个多任务多标签模型,并逐步介绍整个过程。所以本文将涵盖数据准备、模型构建、训…

keepalived讲解及练习

目录 1、keepalived介绍 1.1 keepalived简介 2、高可用集群 2.1 集群类型 2.2 系统可用性 2.3 系统故障 2.4 实现高可用 3、VRRP 3.1 VRRP&#xff1a;Virtual Router Redundancy Protocol 3.2 VRRP 相关术语 3.3 VRRP相关技术 4、 keepalived实验 4.1 全局配置 4…

Vue封装axios请求(超详细)

一、简介 Vue封装axios请求是指将axios库集成到Vue项目中&#xff0c;以便更方便地发送HTTP请求。首先&#xff0c;需要安装axios库&#xff0c;然后在Vue项目中创建一个名为request.js的文件&#xff0c;用于封装axios实例。在这个文件中&#xff0c;可以设置默认的配置&#…

fastzdp_sqlmodel框架是如何实现更新和删除相关的功能封装的,20240817,Python的国产新ORM框架

根据模型对象更新 初步封装的方法 def update(engine, model_obj, update_dict):"""修改数据:param engine: 连接数据库的引擎对象:param model_obj: 模型对象:param update_dict: 更新字典:return:"""with Session(engine) as session:if not…

Git工具详细使用教程

Git工具详细使用教程 Git是一个分布式版本控制系统&#xff0c;它可以帮助你管理代码的历史记录。本教程将介绍如何使用Git工具进行基本的版本控制操作。 1. 安装Git 首先&#xff0c;你需要在你的计算机上安装Git。你可以从Git官方网站&#xff08;https://git-scm.com/&am…

MySQL(三)——DCL

文章目录 DCL用户管理查询用户创建用户修改用户密码删除用户 权限控制查询权限授予权限撤销权限 DCL DCL&#xff08;Data Control Language&#xff0c;数据控制语言&#xff09;是SQL的一个子集&#xff0c;专门用于定义数据库、表、视图等的访问权限和安全级别。 它允许数据…

Openstack二层网络的构建和使用

Openstack二层网络的构建和使用 一、实验目的 &#xff08;1&#xff09;了解网络层级、子网、动态地址、网关代理等概念并进行应用。 &#xff08;2&#xff09;了解OpenStack项目以及相关组件。 &#xff08;3&#xff09;了解 Neutron 二层网络的构建和使用。 二、实验原…

如何确定vtk .h文件所在的库名字

问题 例如使用class vtkSTLReader,头文件包含#include <vtkSTLReader.h>,库使用哪个&#xff1f; 解决 1.在vs2019解决方案资源管理器中搜索vtkSTLReader.cxx&#xff0c;显示project为IOGeometry即为库名 2.在所在的CMakeLists.txt追加库名 3.在cmake重新Configure、G…

JWT中的Token

1.JWT是什么&#xff1f; jwt&#xff08;json web token的缩写&#xff09;是一个开放标准&#xff08;rfc7519&#xff09;&#xff0c;它定义了一种紧凑的、自包含的方式&#xff0c;用于在各方之间以json对象安全地传输信息&#xff0c;此信息可以验证和信任&#xff0c;因…

如果大模型有信仰,那一定是“规模法则”

规模&#xff08;scale&#xff09;是除去时间、空间之外另一个重要的维度。规模缩放&#xff08;Scaling&#xff09;的过程中隐藏着世界非线性本质奥秘背后的共性——规模法则。结合伯努瓦曼德布洛特 Benoit Mandelbrot的《大自然的分形几何》、杰弗里韦斯特 Geoffery West 的…

面试官:Java虚拟机是什么,Java虚拟机的内存模型是什么样子的?

哈喽&#xff01;大家好&#xff0c;我是小奇&#xff0c;一个专给面试官添堵的撑序员 小奇打算以轻松幽默的对话方式来分享一些技术&#xff0c;如果你觉得通过小奇的文章学到了东西&#xff0c;那就给小奇一个赞吧 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一…

EmguCV学习笔记 VB.Net 2.S 特别示例

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 教程VB.net版本请访问&#xff1a;EmguCV学习笔记 VB.Net 目录-CSDN博客 教程C#版本请访问&#xff1a;EmguCV学习笔记 C# 目录-CSD…

el-image 图片预览时 与 el-table (或avue-crud) 样式冲突 的解决

问题: 解决 <style scoped> ::v-deep(.el-table__cell) {position: static !important; } </style> 后效果

SD-WAN视频汇聚网关,帮助企业省去公网服务器费用与流量费用,低成本、高可靠建设视频汇聚与管控平台,助力视频企业级智能应用

在介绍方案之前&#xff0c;我们先算一笔账&#xff0c;传统的B端项目大多数的场景是&#xff1a; 1、多个分布在不同区域&#xff0c;不同网络的现场需要进行视频设备的统一汇聚管理&#xff1b; 2、多种不同类型厂家和型号的设备需要接入&#xff1b; 3、需要接入各种设备的实…

ARM 裸机与 Linux 驱动对比及 Linux 内核入门

目录 ARM裸机代码和驱动的区别 Linux系统组成 内核五大功能 设备驱动分类 内核类型 驱动模块 驱动模块示例 Makefile配置 命令 编码辅助工具 内核中的打印函数 printk 函数 修改打印级别 ​编辑 打印级别含义 驱动多文件编译 示例 模块传递参数 命令行传递参数…

Keepalived知识点整理

Keepalived知识点整理 高可用集群 keeaplived高可用集群集群类型系统可用性实现高可用VRRP:Virtual Router Redundancy ProtocolVRRP相关术语 keepalived简介keeplived架构配置文件组成部分配置文件主要部分的解释说明: 环境配置ka1ka2realserver1realserver2 实验1:实验2独立日…

jetson循环输入密码登录不进GUI桌面环境

大概安装了pip, opencv, nvidia-jetpack&#xff0c;添加了环境变量&#xff0c;重启后&#xff0c;Jetson orin nano 登录不进去GUI桌面系统&#xff0c;输入密码后&#xff0c;又出现登录界面要求输入密码&#xff0c;如此循环&#xff0c;没有其他报错。 注意到在启动界面有…

天地伟业入职智鼎测评题库:EQT情商测验、IQCAT思维能力自适应测验

天地伟业智鼎题库EQT情商测验 情商测验采用关键事件法提取和概括人们在社会生活中发生的情景了解作答者在面对典型的工作、生活情景时最可能采取的做法&#xff0c;考察作答者的情绪觉察、情绪调节、自我激励、同理心、社交技能这5种重要的情绪智力&#xff0c;在销售人员和管理…