Vue3 项目实战 —— 后台管理系统( pc端 ) —— 动态多级导航菜单顶部侧边联动

已于 2023-04-20 14:03:14 修改
阅读量4.2k 收藏 32
点赞数 6
分类专栏： # vue3 文章标签： javascript 开发语言 ecmascript 项目 vue3
于 2023-01-20 11:07:57 首次发布
CSDN-@活在风浪里001
本文链接：https://blog.csdn.net/m0_57904695/article/details/128740216
版权

 万人都要将火熄灭，我一人独将此火高高举起，我借此火得度一生的茫茫黑夜。 ——海子

和所有以梦为马的诗人一样，我借此火得度一生的茫茫黑夜。 ——海子

前期回顾    

0.活在风浪里的博客_CSDN博客-vue2,开源项目,Js领域博主0.活在风浪里擅长vue2,开源项目,Js,等方面的知识,0.活在风浪里关注css,safari,html5,scss,elementui,前端,es6,正则表达式,vue.js,express,ajax,webpack,echarts,json,html,typescript,sass,https,面试,chrome,npm,javascript,xhtml,前端框架,node.js,yarn,css3领域.https://blog.csdn.net/m0_57904695?spm=1001.2101.3001.5343

目录

 home.vue

 结语：

话密了，上硬菜

面试官:如果有多层菜单结构，你怎么把它渲染上去？

第一种使用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>

<template>
	<el-menu
		v-for="menu in menuList"
		:key="menu.name"
		class="el-menu-demo menu-left"
		background-color="#545c64"
		text-color="#fff"
		active-text-color="#ffd04b"
		@select="handleSelect(menu.path)"
		:unique-opened="true"
		:default-openeds="openeds"
	>
		<!-- 如果当前有子菜单，则显示 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.meta.icon"></i>&emsp;{{ 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.meta.icon"></i>{{ menu.name }} </el-menu-item>
	</el-menu>
	<!--注意项
	1.这里的MenuTree 是vue的递归组件，实际上就是组件自己调用自己,这里组件中调用自己的组件名字是name属性。
	2.一点要在递归组件中加上判断条件，否则可能会造成爆栈。
	3.这里的属性名字请根据自己后端传递的数据字段名字改变。 -->
</template>

<script>
export default {
	name: 'MenuTree',
};
</script>

<script setup>
const props = defineProps({
	menuList: {
		type: Array,
		default: () => [],
	},
});

// 菜单点击事件
const handleSelect = (Path) => {
	window.open('/#' + Path, '_blank'); // 打开新的窗口(跳转路径，跳转类型);
};

// 动态获取子菜单的index和父级名称，用于默认展示所有子菜单
const openeds = computed(() => {
	const arr = [];
	props.menuList.forEach((item) => {
		arr.push(item.name);
		if (item.children && item.children.length > 0) {
			item.children.forEach((item) => {
				arr.push(item.name);
			});
		}
	});
	return arr;
});
// console.log('！这里输出 🚀 ==>：', openeds.value);
</script>

<style lang="scss" scoped>
.menu-left {
	:deep(.el-menu-item.is-active) {
		color: #fff !important;

		&:hover {
			color: #409eff !important;
		}
	}
}
</style>

直接拷贝就能使用，参考，其实没什么难度，比较简单！

如图有真相

结语：

新年快乐 kk

​​​​​​​​​​​​​​

彩色之外
关注
  • 6
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
vue项目头部路由，侧边栏路由联动问题
qq_41588568的博客
03-26 6467
菜单效果：头部四个大的菜单，点击头部每个菜单，对应切换左侧菜单栏，点击浏览器刷新，刷新页面的同时保持各个菜单的状态不变 头部四个菜单layout/index.vue： data部分： data() { return { index: '1', //默认进去为首页 //activeIndex2: '1', } }, 计算属性部分： compu...
基于vue3+elementPlus的后台管理系统模板
02-18
基于vue3+elementPlus的后台管理系统模板
Vue3实战商城后台管理系统开发
09-01
分享课程——Vue3实战商城后台管理系统开发，2022年完整版20章，附源码。 本季度基于Vue3 + ElementPlus + Vite实战开发商城后台管理系统，其中包括Vite的使用，Vue3全新的 <script setup> 语法，vuex4、Vue-router4、使用ElementPlus 库、多权限管理、商品多规格实现、订单发货、导出订单、图库模块、分销模块、分享海报以及部署服务器上线知识等。
Vue3实战笔记（20）—封装头部导航组件
最新发布
山花的博客
05-14 612
Vue 3 封装头部导航栏有助于提高代码复用性、统一风格、降低维护成本、提高可配置性和模块化程度，同时还可以实现动态渲染等功能，有利于项目开发和维护。封装头部导航栏可以确保整个项目的导航栏风格一致，提升用户体验，让用户在使用过程中感到更加舒适和自然。就是大家都有咱们也得有。行动是实现梦想的桥梁，坚持是成功的密码。
vue顶部一级菜单侧边二三级菜单
weixin_44086376的博客
12-03 2143
侧边栏 顶部导航
Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
热门推荐
无解的菜鸟晖 的博客
12-02 4万+
一、目的 后台管理系统页面的整体结构如图： 实现顶部一级菜单和左侧二级菜单进行响应，选哪个一级菜单时，左侧菜单栏有相对应下的二级菜单，产生联动效果。然后选不同的二级菜单，主体内容区域展示对应内容。 二、效果图 三、具体操作实现 1、用 vue-cli 创建的 Vue 项目后，自己再手动搭建项目的基本目录结构，如图： 2、创建一个公共组件Whole.vue 来实现整体页面结构的布局，通过 div 来进行区域定位和大小设定。 使用 el-menu 组件的 mode ...
P4-Vue3后台管理系统-顶部导航与左侧导航联动面包屑
Bruce小鬼
02-07 4780
P4-Vue3后台管理系统-顶部导航与左侧导航联动面包屑 1.概述 上篇文章实现了左侧边栏导航，这篇文章我们开发顶部导航。 2.顶部导航栏设置 2.1.设置导航栏背景色 在Main.vue组建中设置Header导航栏背景色 2.1.Header添加按钮 官网中找到Button按钮–图标按钮–复制图标按钮代码 应用到CommonHeader组件中 官网搜索图标替换按钮默认图标 2.2.添加头像下拉菜单 Element官网找到点击触发下拉菜单 复制点击触发下拉菜单代码 应
vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换
qq_40936424的博客
03-26 6012
layout-------------模板包含菜单栏等主要框架 router--------------路由管理,根据路由可生成左侧菜单栏 /** When your routing table is too long, you can split it into small modules**/ import Layout from '@/layout' var search = [ {...
vue导航栏组件
qq_45179361的博客
02-09 3113
使用html+css搭建网页导航栏。
jeecg前端部分，antd pro vue，前端菜单改成顶部一级左右二三级菜单，jeecg是在antd基础更改的，所以antd-design-vue菜单一二级更改类似
Funny_genius_cai的博客
01-15 4111
首先最近项目需要把jeecg前端部分菜单栏改成顶部一级左边二三级菜单，由于jeecg或者antd pro vue开源版本菜单只有顶部或者侧边 两种模式，所以没办法只能再次基础上改成需要的模式。 最后做成效果图如下（并没有美化只是先实现了需求） 实现过程如下可参考： 1、首先我们在jeecg菜单模式为horizontal 的基础上更改 第一步：实现的是顶部菜单只有一级的情况下路由可以跳转；如有二三级菜单点击没有效果 ①找到这个文件 109行左右改成 这样就完成了第一个需求 此时顶部菜单只有只用于一级菜单的情
Layui快速入门之第五节 导航
qq_61313896的博客
09-13 1788
Layui快速入门之第五节 导航
vue组装模板（侧边栏+顶部+主体）--项目阶段4
快乐学习
08-26 1887
一、前言介绍一、前言介绍在上一篇文章中已经介绍了如何去实现前后端数据的交互并在前端显示出来。那么本篇文章是给这个项目增加上侧边栏，点击不同的侧边栏会有不同的效果。使用侧边栏的系统实际上是单页面系统，运行用户体验会更好，但是缺点就是SEO（搜索曝光率）没有多页面的好，典型的网易云就是单页面的系统。就是整体框架不会变，只是变里面的内容。这样用户体验度会比较好。若依开源项目（）也是一样的还有网易云音乐的官网也是二、操作步骤（一）结构解析页面要分成3部分组成，分别是侧边栏、顶部和主体3部分。
vue3实现吸顶和导航锚点联动
weixin_49684489的博客
09-22 1241
vue3实现吸顶和导航锚点联动
使用Vue实现一个简单的类手风琴效果的侧边导航栏
@zhujj_的博客
11-30 1114
手风琴导航栏啊，is accordion.
【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠
karshey的博客
11-02 6116
【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠
如何利用Vue3管理系统实现动态路由和动态侧边菜单栏
weixin_51225684的博客
08-18 5297
在做Vue管理系统的时候，都会遇到的一个需求：每个用户的权限是不一样的，那么他可以访问的页面(路由)，可以操作的菜单选项是不一样的，如果由后端控制，我们前端需要去实现动态路由，动态渲染侧边菜单栏。...
vue2+若依框架+element-ui如何实现侧边栏改成顶部导航？(兼职解答合作私信)
ZZZZZZZZjy的博客
08-19 5004
我们的思路是把垂直的侧边栏二级标题换成水平的，查看element-ui的官网可知NavMenu 导航菜单。把vertical改成horizontal之后并把侧边栏组件放到顶部组件中发现它没有到上面去如下图。于是给sidebar的el-menu组件加一个flex让它浮动上去。侧边栏的空白区是多余的就把sidebar-width设置为0就好了。若依没有开启设置布局中的topnav的时候是这样的。最后顶部导航就出来，有同样需求的小伙伴可以试试，
Vue3+Ts+Vite项目(第九篇)——基于el-menu封装左侧菜单栏组件，element-plus el-menu二次封装
做笔记/记录遇到的前端bug
08-03 6691
Vue3+Ts+Vite项目基于el-menu封装左侧菜单栏组件，实现根据路由列表动态渲染导航菜单，递归实现多级菜单渲染
Vue3使用递归组件封装El-Menu多级菜单
明知山
09-04 1992
【代码】Vue3使用递归组件封装El-Menu菜单。
VUE项目，VUE项目实战，vue后台管理系统
08-12
如果你想进行VUE项目实战并开发一个VUE后台管理系统，以下是一些建议和资源可供参考。 首先，如果你是大学即将毕业或自学前端且缺乏项目经验，你可以考虑以下几点： - 寻找相关的在线教程或课程，这些资源通常会提供详细的步骤和案例来帮助你实践VUE项目。你可以搜索一些知名的在线教育平台，如网易云课堂、慕课网等。 - 参考md文档，一些教程可能会总结在md文档中，这将帮助你更好地理解项目开发过程中的每一步。 - 观看相关的视频教程，比如在哔哔哩哩上搜索"程序员Allen"，他提供了一些关于VUE项目实战的视频教程。 另外，如果你想开发一个基于VUE的后台管理系统，你需要考虑以下几点： - 确定使用的技术栈。目前最新的技术栈中，Vue3.2、TypeScript、Vite3、Pinia、Element-Plus是一些常见的选择。这些技术将帮助你更高效地开发后台管理系统。 - 寻找开源的后台管理框架。你可以搜索一些开源的后台管理框架，这些框架提供了一些常用的组件、Hooks、指令、动态路由、按钮级别权限控制等功能。这将节省你的开发时间和提高效率。 总之，为了进行VUE项目实战和开发后台管理系统，你可以参考在线教程、学习md文档、观看相关视频教程，同时寻找开源的后台管理框架来加速你的开发过程。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue项目实战 —— 后台管理系统( pc端 ) —— Pro最终版本](https://blog.csdn.net/m0_57904695/article/details/129730440)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue项目实战 —— 后台管理系统( pc端 )](https://blog.csdn.net/m0_67391377/article/details/124818830)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彩色之外

你的打赏是我创作的氮气加速动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值