Vue.js结合Element-UI递归实现多级导航菜单动态加载

最新推荐文章于 2023-09-05 17:26:17 发布

原创最新推荐文章于 2023-09-05 17:26:17 发布 · 1.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

Vue.js 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个基于Element UI的导航组件实现方案，通过递归的方式构建多级菜单，支持不同层级的菜单项展示，并提供了完整的Vue组件代码示例。

主要参考https://blog.youkuaiyun.com/gnosed/article/details/105178518

Menu.Vue

在需要加载导航的地方调用该组件：

<el-menu >
    <navigation-item v-for="(menu,i) in List" :key="i" :item="menu"/>
</el-menu>

完整代码：

<template>
  <div>
    <el-aside width="200px">
    <el-menu >
    <navigation-item v-for="(menu,i) in List" :key="i" :item="menu"/>
    </el-menu>
    </el-aside>
  </div>
</template>
<script>
import navigationItem from './navigationItem'

export default {
  name:'navigation',
  components: { navigationItem },
  data() {
    return{
      List: [
        {
          "id": 1,
          "path": "/admin ",
          "name": "Content",
          "nameZh": "物理机能耗预测",
          "iconCls": "el-icon-tickets",
          "component": "AdminIndex",
          "parentId": 0,
          "children": [{
            "id": 9,
            "path": "/admin/content/department",
            "name": "Department",
            "nameZh": "Host1",
            "iconCls": null,
            "component": "content/department",
            "parentId": 3,
            "children": null
          },
            {
              "id": 10,
              "path": "/admin/content/student",
              "name": "Student",
              "nameZh": "Host2",
              "iconCls": null,
              "component": "content/student",
              "parentId": 3,
              "children": null
            },
            {
              "id": 11,
              "path": "/admin/content/enterprise",
              "name": "Enterprise",
              "nameZh": "Host3",
              "iconCls": null,
              "component": "content/enterprise",
              "parentId": 3,
              "children": null
            }
          ]
        },
        {
          "id": 4,
          "path": "/admin",
          "name": "System",
          "nameZh": "物理机能耗分解",
          "iconCls": "el-icon-s-tools",
          "component": "AdminIndex",
          "parentId": 0,
          "children": [{
            "id": 12,
            "path": "/admin/system/run",
            "name": "Run",
            "nameZh": "虚拟机分解",
            "iconCls": null,
            "component": "system/run",
            "parentId": 4,
            "children": [{
              "id": 9,
              "path": "/admin/content/department",
              "name": "Department",
              "nameZh": "Host1",
              "iconCls": null,
              "component": "content/department",
              "parentId": 3,
              "children": null
            },
              {
                "id": 10,
                "path": "/admin/content/student",
                "name": "Student",
                "nameZh": "Host2",
                "iconCls": null,
                "component": "content/student",
                "parentId": 3,
                "children": [{
                  "id": 20,
                  "path": "/admin/content/student/graduateInfo",
                  "name": "graduateInfo",
                  "nameZh": "VM1",
                  "iconCls": null,
                  "component": "content/student/graduateInfo",
                  "parentId": 10,
                  "children": [{
                    "id": 20,
                    "path": "/admin/content/student/graduateInfo",
                    "name": "graduateInfo",
                    "nameZh": "Docker1",
                    "iconCls": null,
                    "component": "content/student/graduateInfo",
                    "parentId": 10,
                    "children": {}
                  }]
                },{
                  "id": 20,
                  "path": "/admin/content/student/graduateInfo",
                  "name": "graduateInfo",
                  "nameZh": "VM2",
                  "iconCls": null,
                  "component": "content/student/graduateInfo",
                  "parentId": 10,
                  "children": null
                }]
              },
              {
                "id": 11,
                "path": "/admin/content/enterprise",
                "name": "Enterprise",
                "nameZh": "Host3",
                "iconCls": null,
                "component": "content/enterprise",
                "parentId": 3,
                "children": [{
                  "id": 11,
                  "path": "/admin/content/enterprise",
                  "name": "Enterprise",
                  "nameZh": "VM4",
                  "iconCls": null,
                  "component": "content/enterprise",
                  "parentId": 3,
                  "children": null
                }]
              }
            ]
          },
            {
              "id": 13,
              "path": "/admin/system/data",
              "name": "Data",
              "nameZh": "Docker分解",
              "iconCls": null,
              "component": "system/data",
              "parentId": 4,
              "children": null
            },
            {
              "id": 14,
              "path": "/admin/system/log",
              "name": "Log",
              "nameZh": "硬件分解",
              "iconCls": null,
              "component": "system/log",
              "parentId": 4,
              "children": null
            }
          ]
        }
      ],
    }
  },
  props:{
    menuList: {
      type: Array,
      required: true
    }
  }
}
</script>

navigationItem.Vue

<template>
  <div>
    <!--叶子级菜单-->
    <template v-if="item.children && item.children.length === 0">
      <el-menu-item :key="item.id" :index="item.path">
        {{item.nameZh}}
      </el-menu-item>
    </template>
    <!--父级菜单-->
    <el-submenu v-else :index="item.path" style="text-align: left">
      <span slot="title">
        <i :class="item.iconCls"></i>
        {{item.nameZh}}
      </span>
      <template v-for="child in item.children">
        <navigation-item v-if="child.children && child.children.length>0" :key="child.id" :item="child"/>
        <el-menu-item v-else :key="child.id" :index="child.path">
          <i :class="child.icon"></i>
          {{child.nameZh}}
        </el-menu-item>
      </template>
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'navigationItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>