Vue3 项目实战 —— 后台管理系统( pc端 ) —— 动态多级导航菜单顶部侧边联动
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
前期回顾 
目录
面试官:如果有多层菜单结构你怎么把它渲染上去
第一种使用for循环是不行的因为你不确定他有多少层级而且for循环嵌套过多不易维护结构不明
第二种: 拿到菜单数据使用计算属性将由children的有层级的结构出来将没有层级的也同样给结构出来这样只是将有子级的和没有子级的菜单给分开了同样有子级的还是要写多重数循环去循环它显然又变成了第一种的问题也不合适
第三种: 使用递归组件什么是递归组件就是子组件在运行过程中调用自己
需求 顶部展示一级二级菜单点击顶部二级菜单如果有三级就在左侧展示二级剩余菜单使用element-plus
home.vue
<template>
<div>
<!-- 需求 顶部展示一级二级菜单点击顶部二级菜单如果有三级就在左侧展示二级剩余菜单使用element-plus -->
<!-- 顶部菜单 -->
<el-menu
default-active="1"
class="el-menu-vertical-demo"
mode="horizontal"
background-color="#eee"
>
<template v-for="item in menuObj">
<!-- 如果有二级菜单使用 el-sub-menu如果没有使用 el-menu-item-->
<el-sub-menu
:key="item.path"
:index="item.path"
:disabled="item.disabled"
v-if="item.children && item.children.length > 0"
>
<template #title>
<i :class="item.meta.icon"></i>
<span>{{ item.meta.title }}</span>
</template>
<el-menu-item
v-for="item2 in item.children"
:key="item2.path"
:index="item2.path"
:disabled="item2.disabled"
@click="handleClick2(item2)"
>
<i :class="item2.meta.icon"></i>
<div class="text2-icon">
<span>
{{ item2.meta.title }}
</span>
<el-icon v-if="item2.children" :size="15" class="icon">
<ArrowRight />
</el-icon>
</div>
</el-menu-item>
</el-sub-menu>
<!--不使用 el-sbu-menu 独立一级-->
<el-menu-item :index="item.path" v-else>
<i :class="item.meta.icon"></i>
<span>{{ item.meta.title }}</span></el-menu-item
>
</template>
</el-menu>
<!-- 左侧二级剩余所有菜单 leftMenu-->
<!-- 递归组件 -->
<div class="left-box" v-if="flag">
<menu-tree :menuList="leftMenu"></menu-tree>
</div>
</div>
</template>
<script setup>
// 引入递归组件
import MenuTree from "./MenuTree.vue";
//所有菜单数据
let menuObj = [
{
path: "/home",
name: "首页",
children: null,
meta: {
title: "首页",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-home",
},
},
{
path: "#",
name: "系统管理",
children: [
{
path: "/system/department",
name: "部门管理",
children: null,
meta: {
title: "部门管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-office-building",
},
},
{
path: "/system/role",
name: "角色管理",
children: null,
meta: {
title: "角色管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-cold-drink",
},
},
{
path: "/system/user",
name: "用户管理",
children: null,
meta: {
title: "用户管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-user",
},
},
{
path: "/system/dictionaries",
name: "字典管理",
children: null,
meta: {
title: "字典管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-notebook-2",
},
},
{
path: "/system/logonLog",
name: "操作日志",
children: null,
meta: {
title: "操作日志",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-document",
},
},
{
path: "/system/maintain",
name: "企业信息维护",
children: null,
meta: {
title: "企业信息维护",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-school",
},
},
],
meta: {
title: "系统管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-setting",
},
},
{
path: "/IntelligentAuthorizationManagement",
name: "智能授权管理",
children: [
{
path: "/dataAnalysisAll/Authorize",
name: "隐私授权维护",
children: [
{
path: "/dataAnalysisAll/Authorize/Purpose",
name: "使用目的管理",
children:
// 11111
[
{
path: "/IntelligentAtionManagement",
name: "1",
children: [
{
path: "/dataAnalysisAll/Authorize",
name: "1-1",
children: [
{
path: "/dataAll/Authorize/Purpose",
name: "1-1-2",
children: null,
meta: {
title: "2",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-more-outline",
},
},
{
path: "/dataAna/Authorize/privacy",
name: "1-1-3",
children: null,
meta: {
title: "3",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-view",
},
},
{
path: "/dataAnalyAuthorize/scene",
name: "1-1-4",
children: null,
meta: {
title: "4",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-film",
},
},
{
path: "/dataAnalysthorize/applica",
name: "1-1-5",
children: null,
meta: {
title: "5",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-platform",
},
},
],
meta: {
title: "隐私授权维护666",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-check",
},
},
],
meta: {
title: "智能授权管理222",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-circle-check",
},
},
],
// 22222
meta: {
title: "使用目的管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-more-outline",
},
},
{
path: "/dataAnalysisAll/Authorize/privacy",
name: "隐私项管理",
children: null,
meta: {
title: "隐私项管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-view",
},
},
{
path: "/dataAnalysisAll/Authorize/scene",
name: "业务场景管理",
children: null,
meta: {
title: "业务场景管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-film",
},
},
{
path: "/dataAnalysisAll/Authorize/applica",
name: "客户应用管理",
children: null,
meta: {
title: "客户应用管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-platform",
},
},
],
meta: {
title: "隐私授权维护",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-check",
},
},
{
path: "/dataAnalysisAll/modelAgreement",
name: "协议管理",
children: [
{
path: "/dataAnalysisAll/modelAgreement/makeTemplate",
name: "系统模板",
children: null,
meta: {
title: "系统模板",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-c-scale-to-original",
},
},
{
path: "/dataAnalysisAll/modelAgreement/templateQueries",
name: "自定义模板",
children: null,
meta: {
title: "自定义模板",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-edit-outline",
},
},
{
path: "/dataAnalysisAll/modelAgreement/customTemplate",
name: "协议正文",
children: null,
meta: {
title: "协议正文",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-document",
},
},
],
meta: {
title: "协议管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-tickets",
},
},
{
path: "/dataAnalysisAll/ultraviresdetection",
name: "越权检测",
children: [
{
path: "/dataAnalysisAll/ultraviresdetection/authorizeupload",
name: "用户授权数据上传",
children: null,
meta: {
title: "用户授权数据上传",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-upload2",
},
},
{
path: "/dataAnalysisAll/ultraviresdetection/userauthorization",
name: "用户授权数据",
children: null,
meta: {
title: "用户授权数据",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-collection-tag",
},
},
{
path: "/dataAnalysisAll/ultraviresdetection/authorizationtestresults",
name: "越权检测结果",
children: null,
meta: {
title: "越权检测结果",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-warning-outline",
},
},
],
meta: {
title: "越权检测",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-help",
},
},
],
meta: {
title: "智能授权管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-circle-check",
},
},
{
path: "/compliance",
name: "合规监控中心",
children: [
{
path: "/compliance/detail",
name: "监控视图",
children: null,
meta: {
title: "监控视图",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-grid",
},
},
{
path: "/compliance/apiReport",
name: "API日志",
children: null,
meta: {
title: "API日志",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-top-right",
},
},
{
path: "/compliance/riskReporting",
name: "风险报告",
children: [
{
path: "/compliance/riskReporting/dereport",
name: "a",
children: [
{
path: "/IntelligentAtionManagement",
name: "a-1",
children: [
{
path: "/dataAnalysisAll/Authorize",
name: "a-1-1",
children: [
{
path: "/dataAll/Authorize/Purpose",
name: "a-1-2",
children: null,
meta: {
title: "2",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-more-outline",
},
},
{
path: "/dataAna/Authorize/privacy",
name: "a-1-3",
children: null,
meta: {
title: "3",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-view",
},
},
{
path: "/dataAnalyAuthorize/scene",
name: "a-1-4",
children: null,
meta: {
title: "4",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-film",
},
},
{
path: "/dataAnalysthorize/applica",
name: "a-1-5",
children: null,
meta: {
title: "5",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-platform",
},
},
],
meta: {
title: "5222",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-check",
},
},
],
meta: {
title: "4222",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-circle-check",
},
},
],
meta: {
title: "问卷评估报告",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-tickets",
},
},
{
path: "/compliance/riskReporting/globalReporting",
name: "全局风险报告",
children: null,
meta: {
title: "全局风险报告",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-film",
},
},
],
meta: {
title: "风险报告",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-opportunity",
},
},
{
path: "/compliance/riskdisposal",
name: "风险处置工作台",
children: [
{
path: "/compliance/riskdisposal/riskTobeAllocated",
name: "待分配风险",
children: null,
meta: {
title: "待分配风险",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-sold-out",
},
},
{
path: "/compliance/riskdisposal/riskToeDisposed",
name: "待处置风险",
children: null,
meta: {
title: "待处置风险",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-sell",
},
},
{
path: "/compliance/riskdisposal/allRisksQuery",
name: "全部风险查询",
children: null,
meta: {
title: "全部风险查询",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-search",
},
},
{
path: "/compliance/riskdisposal/myRiskQuery",
name: "我的风险查询",
children: null,
meta: {
title: "我的风险查询",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-magic-stick",
},
},
],
meta: {
title: "风险处置工作台",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-box",
},
},
],
meta: {
title: "合规监控中心",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-goods",
},
},
{
path: "/dataAnalysis",
name: "数据分析处理",
children: [
{
path: "/dataAnalysis/system",
name: "数据分析",
children: [
{
path: "/dataAnalysis/system/sourceData",
name: "源数据分析",
children: null,
meta: {
title: "源数据分析",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-data-analysis",
},
},
{
path: "/dataAnalysis/system/catalogueData",
name: "目录数据分析",
children: null,
meta: {
title: "目录数据分析",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-notebook-1",
},
},
],
meta: {
title: "数据分析",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-management",
},
},
{
path: "/dataAnalysis/fileDetection",
name: "文件检测",
children: [
{
path: "/dataAnalysis/fileDetection/uploadfile",
name: "知情授权书文件检测",
children: null,
meta: {
title: "知情授权书文件检测",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-tickets",
},
},
{
path: "/dataAnalysis/fileDetection/informedConsent",
name: "知情授权书检测查询",
children: null,
meta: {
title: "知情授权书检测查询",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-document-checked",
},
},
{
path: "/dataAnalysis/fileDetection/privacydetection",
name: "隐私协议文件检测",
children: null,
meta: {
title: "隐私协议文件检测",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-collection-tag",
},
},
{
path: "/dataAnalysis/fileDetection/privacyquery",
name: "隐私协议检测查询",
children: null,
meta: {
title: "隐私协议检测查询",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-collection",
},
},
{
path: "/dataAnalysis/fileDetection/entrustAgreement",
name: "委托处理协议",
children: null,
meta: {
title: "委托处理协议",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-top-right",
},
},
{
path: "/dataAnalysis/fileDetection/serveAgreement",
name: "服务协议",
children: null,
meta: {
title: "服务协议",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-discount",
},
},
{
path: "/dataAnalysis/fileDetection/useAgreement",
name: "使用协议",
children: null,
meta: {
title: "使用协议",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-tickets",
},
},
{
path: "/dataAnalysis/fileDetection/fileScan",
name: "文件扫描",
children: null,
meta: {
title: "文件扫描",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-wallet",
},
},
],
meta: {
title: "文件检测",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-claim",
},
},
],
meta: {
title: "数据分析处理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-ticket",
},
},
{
path: "/pia",
name: "PIA评估",
children: [
{
path: "/pia/templates",
name: "评估模板",
children: null,
meta: {
title: "评估模板",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-order",
},
},
{
path: "/pia/evaluate",
name: "PIA评估处理",
children: null,
meta: {
title: "PIA评估处理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-help",
},
},
{
path: "/pia/riskScore",
name: "风险评分配置",
children: null,
meta: {
title: "风险评分配置",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-collection",
},
},
{
path: "/pia/riskClassify",
name: "风险分类查询",
children: null,
meta: {
title: "风险分类查询",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-shop",
},
},
{
path: "/pia/threat",
name: "威胁库查询",
children: null,
meta: {
title: "威胁库查询",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-opportunity",
},
},
{
path: "/pia/vulnerability",
name: "漏洞库查询",
children: null,
meta: {
title: "漏洞库查询",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-goblet-square-full",
},
},
],
meta: {
title: "PIA评估",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-promotion",
},
},
{
path: "/daily",
name: "日常管理",
children: [
{
path: "/daily/architecturemaintenance",
name: "合规组织架构维护",
children: null,
meta: {
title: "合规组织架构维护",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-school",
},
},
{
path: "/daily/organization",
name: "合规人员管理",
children: null,
meta: {
title: "合规人员管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-coordinate",
},
},
{
path: "/daily/rules",
name: "规章制度",
children: null,
meta: {
title: "规章制度",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-document-copy",
},
},
{
path: "/daily/compliance",
name: "规章制度模板",
children: null,
meta: {
title: "规章制度模板",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-tickets",
},
},
{
path: "/daily/contract",
name: "合同协议",
children: null,
meta: {
title: "合同协议",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-folder-opened",
},
},
{
path: "/daily/contractcompliance",
name: "合同协议模板",
children: null,
meta: {
title: "合同协议模板",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-folder",
},
},
{
path: "/daily/training",
name: "培训",
children: null,
meta: {
title: "培训",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-data-line",
},
},
],
meta: {
title: "日常管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-cpu",
},
},
{
path: "/repository",
name: "知识库",
children: [
{
path: "/repository/systemKnow",
name: "系统问卷",
children: null,
meta: {
title: "系统问卷",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-document",
},
},
{
path: "/repository/systemLaw",
name: "法律法规",
children: null,
meta: {
title: "法律法规",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-view",
},
},
{
path: "/repository/risk",
name: "风险点大全",
children: null,
meta: {
title: "风险点大全",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-wind-power",
},
},
{
path: "/repository/ques",
name: "问卷记录",
children: null,
meta: {
title: "问卷记录",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-money",
},
},
],
meta: {
title: "知识库",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-coin",
},
},
{
path: "/assetcenter",
name: "资产中心",
children: [
{
path: "/assetcenter/serviceassetdiscovery",
name: "服务资产发现",
children: null,
meta: {
title: "服务资产发现",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-set-up",
},
},
{
path: "/assetcenter/logassetdiscovery",
name: "日志发现",
children: [
{
path: "/assetcenter/logassetdiscovery/obviousfindings",
name: "日志发现明细",
children: null,
meta: {
title: "日志发现明细",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-tickets",
},
},
{
path: "/assetcenter/logassetdiscovery/logalarm",
name: "日志告警",
children: null,
meta: {
title: "日志告警",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-warning-outline",
},
},
],
meta: {
title: "日志发现",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-notebook-1",
},
},
{
path: "/assetcenter/dataassetdiscovery",
name: "数据库资产发现",
children: [
{
path: "/assetcenter/dataassetdiscovery/assettaskconfiguration",
name: "资产任务配置",
children: null,
meta: {
title: "资产任务配置",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-tools",
},
},
{
path: "/assetcenter/dataassetdiscovery/rulemanagement",
name: "规则管理",
children: null,
meta: {
title: "规则管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-setting",
},
},
{
path: "/assetcenter/dataassetdiscovery/resultexample",
name: "DB结果实例",
children: null,
meta: {
title: "DB结果实例",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-operation",
},
},
{
path: "/assetcenter/dataassetdiscovery/resultdatasheet",
name: "结果数据表",
children: null,
meta: {
title: "结果数据表",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-files",
},
},
],
meta: {
title: "数据库资产发现",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-shop",
},
},
],
meta: {
title: "资产中心",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-finance",
},
},
{
path: "/multitaskmanagement",
name: "多任务管理",
children: [
{
path: "/multitaskmanagement/taskCollection",
name: "任务集合管理",
children: null,
meta: {
title: "任务集合管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-grid",
},
},
{
path: "/multitaskmanagement/taskmanagement",
name: "任务管理",
children: null,
meta: {
title: "任务管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-shopping-bag-2",
},
},
{
path: "/multitaskmanagement/dispatchlog",
name: "调度日志",
children: null,
meta: {
title: "调度日志",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-chat-line-square",
},
},
],
meta: {
title: "多任务管理",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-order",
},
},
{
path: "/Policymanagement",
name: "策略管理中心",
children: [
{
path: "/Policymanagement/hierarchicalstrategy",
name: "分级策略",
children: null,
meta: {
title: "分级策略",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-unfold",
},
},
{
path: "/Policymanagement/classificationpolicy",
name: "分类策略",
children: null,
meta: {
title: "分类策略",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-s-grid",
},
},
],
meta: {
title: "策略管理中心",
isLink: false,
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: "el-icon-help",
},
},
];
// 三级菜单数据
let leftMenu = ref([]);
// 是否显示三级菜单左侧的显示时机
let flag = ref(false);
// 点击二级菜单展示左侧菜单
const handleClick2 = (item) => {
if (item.children) {
leftMenu.value = item.children;
flag.value = true;
} else {
leftMenu.value = [];
flag.value = false;
}
console.log("😂👨🏾❤️👨🏼==>", item);
};
</script>
<style lang="scss" scoped>
.left-box {
width: 200px;
height: calc(100vh - 58.4px);
background-color: #545c64;
color: #fff;
animation: fold linear 0.1s;
}
@keyframes fold {
0% {
width: 0;
}
50% {
width: 100px;
}
100% {
width: 200px;
}
}
.text2-icon {
display: flex;
align-items: center;
justify-content: center;
color: #929396;
.icon {
position: absolute;
right: 10px;
}
}
</style>
MenuTree.vue (子组件)
<template>
<el-menu
v-for="menu in menuList"
:key="menu.name"
class="el-menu-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
@select="handleSelect"
:default-active="activeIndex"
:default-openeds="openeds"
:unique-opened="true"
>
<!-- 如果当前有子菜单则显示 el-sub-menu 在el-sub-menu 里调用 递归组件 -->
<el-sub-menu
v-if="menu.children && menu.children.length > 0"
:index="menu.name"
><template #title><i :class="menu.icon"></i>{{ menu.name }}</template
><!-- 调用自身 此处是[重点] !!! -->
<MenuTree :menuList="menu.children"></MenuTree>
</el-sub-menu>
<!-- 如果没有子菜单则显示el-menu-item --><el-menu-item
v-else
:index="menu.name"
><i :class="menu.icon"></i>{{ menu.name }}</el-menu-item
></el-menu
><!--注意项
1.这里的MenuTree 是vue的递归组件实际上就是组件自己调用自己,这里组件中调用自己的组件名字是name属性。
2.一点要在递归组件中加上判断条件否则可能会造成爆栈。
3.这里的属性名字请根据自己后端传递的数据字段名字改变。 -->
</template>
<!-- 1非语法糖定义name属性 -->
<!-- <script lang="ts">
export default defineComponent({
name: "MenuTree",
props: {
menuList: {
type: Array,
default: () => [],
},
},
setup() {
return {};
},
});
</script> -->
<!-- 2语法糖定义name属性
详细看 https://blog.csdn.net/m0_57904695/article/details/128318224?spm=1001.2014.3001.5502
-->
<script>
export default {
name: "MenuTree",
};
</script>
<script setup>
defineProps({
menuList: {
type: Array,
default: () => [],
},
});
//默认激活的菜单展开的菜单第一项
const activeIndex = ref("a-1-2");
// 默认展开的菜单父级
const openeds = ref(["使用目的管理", "1", "1-1", "a", "a-1", "a-1-1"]);
// 菜单点击事件
const handleSelect = (key, keyPath) => {
console.log(key, keyPath);
};
</script>
直接拷贝就能使用参考其实没什么难度比较简单
如图有真相
结语
新年快乐 
kk
