Vue3.x 之 Element Plus 导航菜单栏多级_elementplus导航菜单

使用了unplugin-vue-components 和 unplugin-auto-import自动导入插件的可以将组件放在src/components文件夹内则不需引入即可使用，你只需关注components.d.ts文件内是否已引入该组件。

此处文件在src/layout文件夹下面需手动引入，setup语法糖引入即可使用不需要注册组件。

SubMenu.vue  父组件

<template>
  <template v-for="item in menu">
    <!-- 一级菜单跳转 - 具有能跳转路由的功能 -->
    <el-menu-item v-if="item.pageHtml" :index="item.pageHtml">
      {{ item.name }}
    </el-menu-item>
    <!-- 分级菜单 - 此一级菜单不应具有跳转功能 -->
    <el-sub-menu v-else :index="item.id">
      <template #title>
        <span>{{ item.name }}</span>
      </template>
      <!-- 下级菜单 -->
      <MenuItem :list="item.list"></MenuItem>
    </el-sub-menu>
  </template>
</template>
 
<script lang="ts" setup>
import MenuItem from './MenuItem.vue'
import { MenuList } from './type'
import { ref } from 'vue'
 
// 此处使用的是session保存的页面数据，数据由后台接口获取
const _menu = JSON.parse(sessionStorage.getItem('MENU') || '[]')
const menu: MenuList[] = ref(_menu)
</script>

MenuItem.vue 子组件

<template>
  <template v-for="item in props.list">
    <el-menu-item :index="item.pageHtml">
      {{ item.name }}
    </el-menu-item>
    
    <!-- 子菜单内具有下级菜单，使用el-sub-menu渲染分级 -->
    <el-sub-menu v-if="item.list && item.list.length" :index="item.id">
      <template #title>
        <span>{{ item.name }}</span>
      </template>
 
      <!-- 递归组件 - 此组件为当前组件 -->
      <MenuItem :list="item.list"></MenuItem>
    </el-sub-menu>
  </template>
</template>
 
<script lang="ts" setup>
import * as Type from './type'
 
// 定义props接收的字段
interface Props {
  list: Type.MenuList[]
}
 
// 获取父组件传进来的子菜单列表
const props = defineProps<Props>()
</script>