快捷導(dǎo)航

el-menu如何根據(jù)多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄

更新時間：2024年07月24日 11:01:06 作者：m0_62317155

這篇文章主要介紹了el-menu根據(jù)多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

前提條件

package.json如下所示，這是一個Vite + Vue3 + TS的項(xiàng)目

{
  "name": "vue3-ts-vite-wen-zhang-ji-lu-xiang-mu",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.4.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.69.5",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

下面為了方便，直接在App.vue組件中，代碼結(jié)構(gòu)如下所示，就一純凈項(xiàng)目，然后直接在App.vue中寫代碼

假設(shè)菜單等級只有兩個等級

如果菜單等級只有兩個等級，那就沒有必要使用到遞歸了，直接遍歷，然后根據(jù)是否有children字段，判斷是一級菜單還是二級菜單就可以了。具體代碼如下所示：

<template>
  <div style="width: 100%; height: 100%;">
    <div class="common-layout">
      <el-container>
        <el-header>頭部</el-header>
        <el-container>
          <!-- 側(cè)邊欄區(qū)域 -->
          <el-aside width="200px">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
              <template v-for="(item, index) in menuList" :key="index">
                <el-sub-menu :index="item.path" v-if="item.children && item.children.length">
                  <template #title>
                    <el-icon>
                      <location />
                    </el-icon>
                    <span>{{ item.name }}</span>
                  </template>
                  <el-menu-item v-for="child in item.children" :key="child.id" :index="child.path">
                    {{ child.name }}
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="item.path">
                  <el-icon><setting /></el-icon>
                  <span>{{ item.name }}</span>
                </el-menu-item>
              </template>
            </el-menu>
          </el-aside>
          <!-- 主題區(qū)域 -->
          <el-main>
            這是主題區(qū)域
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Location, Setting } from '@element-plus/icons-vue'
interface MenuItem {
  id: number;
  name: string;
  path: string;
  icon?: string;
  component?: string;
  children?: MenuItem[];
}
const menuList = ref<MenuItem[]>(
  [
    {
      id: 1,
      name: '首頁',
      path: '/',
      icon: 'location',
      component: 'home',
      children: []
    },
    {
      id: 2,
      name: '用戶管理',
      path: '/user',
      icon: 'location',
      component: 'user',
      children: [
        {
          id: 3,
          name: '用戶列表',
          path: 'list',
          icon: '',
          component: 'userList',
          children: []
        },
        {
          id: 5,
          name: '角色列表',
          path: 'roleList',
          icon: '',
          component: 'userList',
          children: []
        }
      ]
    },
    {
      id: 6,
      name: '權(quán)限管理',
      path: '/permission',
      icon: 'setting',
      component: 'permission',
      children: [
        {
          id: 7,
          name: '權(quán)限列表',
          path: 'permissionList',
          icon: '',
          component: 'permissionList',
        }
      ]
    }
  ]
)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;
}
</style>

結(jié)果如下所示

在這里插入圖片描述

但是如果菜單等級超過兩個等級或者多個等級的話

但是如果菜單等級超過兩個等級或者多個等級的話，這時就可以使用到組件遞歸的方式進(jìn)行了。目錄結(jié)構(gòu)如下所示：

在這里插入圖片描述

App.vue

<template>
  <div style="width: 100%; height: 100%;">
    <div class="common-layout">
      <el-container>
        <el-header>頭部</el-header>
        <el-container>
          <!-- 側(cè)邊欄區(qū)域 -->
          <el-aside width="200px">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
              <menu-items :items="menuList"></menu-items>
            </el-menu>
          </el-aside>
          <!-- 主題區(qū)域 -->
          <el-main>
            這是主題區(qū)域
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MenuItems from './components/MenuItems.vue'
interface MenuItem {
  id: number;
  name: string;
  path: string;
  icon?: string;
  component?: string;
  children?: MenuItem[];
}
const menuList = ref<MenuItem[]>(
  [
    {
      id: 1,
      name: '首頁',
      path: '/',
      icon: 'location',
      component: 'home',
      children: []
    },
    {
      id: 2,
      name: '用戶管理',
      path: '/user',
      icon: 'location',
      component: 'user',
      children: [
        {
          id: 3,
          name: '用戶列表',
          path: 'list',
          icon: '',
          component: 'userList',
          children: [
            {
              id: 4,
              name: '用戶詳情',
              path: 'userDetail',
              icon: '',
              component: 'userDetail',
              children: []
            }
          ]
        },
        {
          id: 5,
          name: '角色列表',
          path: 'roleList',
          icon: '',
          component: 'userList',
          children: []
        }
      ]
    },
    {
      id: 6,
      name: '權(quán)限管理',
      path: '/permission',
      icon: 'setting',
      component: 'permission',
      children: [
        {
          id: 7,
          name: '權(quán)限列表',
          path: 'permissionList',
          icon: '',
          component: 'permissionList',
          children: [
            {
              id: 8,
              name: '權(quán)限詳情-1',
              path: 'permissionDetail',
              icon: '',
              component: 'permissionDetail',
              children: [
                {
                  id: 9,
                  name: '權(quán)限詳情-2',
                  path: 'permissionDetail2',
                  icon: '',
                  component: 'permissionDetail2',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;
}
</style>

MenuItems.vue

<template>
    <template v-for="item in items" :key="item.id">
        <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path">
            <template #title>
                <span>{{ item.name }}</span>
            </template>
            <!-- 遞歸遍歷 -->
            <menu-items :items="item.children" />
        </el-sub-menu>
        <el-menu-item v-else :index="item.path">
            <span>{{ item.name }}</span>
        </el-menu-item>
    </template>
</template>
<script setup lang="ts">
interface MenuItem {
  id: number;
  name: string;
  path: string;
  icon?: string;
  component?: string;
  children?: MenuItem[];
}
defineProps<{
    items: MenuItem[];
}>()
</script>

結(jié)果如下所示

在這里插入圖片描述

從圖中可以看出，無論是一層，二層，三層，四層結(jié)構(gòu)的樹形數(shù)據(jù)，都可以在el-menu中展示。

關(guān)于遍歷時圖標(biāo)前的展示后續(xù)完善

關(guān)于點(diǎn)擊路由跳轉(zhuǎn)參考element plus的官網(wǎng)即可

到此這篇關(guān)于el-menu根據(jù)多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄的文章就介紹到這了,更多相關(guān)el-menu多層樹形結(jié)構(gòu)遞歸遍歷展示菜單欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: