Element Plus/vue3 无限级导航实现

在使用element plus 时，最初要使用的就是导航组件了，官网上看到的也就是写死的一级/二级导航，那么如何设计一个无限级且动态的导航呢？毋庸置疑，递归。废话不多说，直接看代码和效果：

代码：

目录结果

SidebarItem.vue

<template>
  <el-menu-item :index="item ? item.url : ''" v-if="!item || !item.children || item.children.length === 0">
    {{ item?.menuName }}
  </el-menu-item>

  <el-sub-menu :index="item ? item.id : ''" v-else>
    <template #title>
      <span class="tab">{{ item?.menuName }}</span>
    </template>

    <div v-for="(child, index) in item?.children" :key="index">
      <template v-if="child.children && child.children.length > 0">
        <sidebar-item :key="child.id" :item="child" />
      </template>
      <el-menu-item v-else :index="child.url">
        <span class="tab sub">{{ child.menuName }}</span>
      </el-menu-item>
    </div>
  </el-sub-menu>
</template>

<script lang="ts" setup>
import { PropType, toRefs } from 'vue';
import { MenuNode } from '../../../../model/menuNode';

const props = defineProps({
  collapse: {
    type: Boolean,
    default: true
  },
  item: {
    type: Object as PropType<MenuNode>,
  },
});

const { item } = toRefs(props);
</script>

<style lang="scss"></style>

Index.vue

<div class="nav">
      <el-scrollbar class="scrollbar">
        <el-menu class="menu" @open="handleOpen" @close="handleClose" mode="horizontal" router>
          <SidebarItem v-for="route in menuList" :key="route.id" :item="route"></SidebarItem>
        </el-menu>
      </el-scrollbar>
    </div>

测试数据：

export default [
    {
        'id': '001',
        'parentId': '0',
        'menuName': '首页',
        'url': '/dashboard',
        'sortNo': 1,
        'icon': 'Aim'
    },
    {
        'id': '002',
        'parentId': '0',
        'menuName': '表格',
        'url': '/charts',
        'sortNo': 4,
        'icon': 'ArrowDownBold'
    },
    {
        'id': '0021',
        'parentId': '002',
        'menuName': '树状图',
        'url': '/charts/charts1',
        'sortNo': 4,
        'icon': 'ArrowDownBold'
    },
    {
        'id': '0022',
        'parentId': '002',
        'menuName': '饼状图',
        'url': '/charts/charts2',
        'sortNo': 4,
        'icon': 'ArrowDownBold'
    },
    {
        'id': '003',
        'parentId': '0',
        'menuName': '测试四级1',
        'url': '/dashboard',
        'menuType': 1,
        'sortNo': 2,
        'icon': 'Aim'
    },
    {
        'id': '0031',
        'parentId': '003',
        'menuName': '测试四级2',
        'url': '/dashboard',
        'menuType': 1,
        'sortNo': 2,
        'icon': 'Aim'
    },
    {
        'id': '00311',
        'parentId': '0031',
        'menuName': '测试四级3',
        'url': '/dashboard',
        'menuType': 1,
        'sortNo': 2,
        'icon': 'Aim'
    },
    {
        'id': '003111',
        'parentId': '00311',
        'menuName': '测试四级4',
        'url': '/dashboard',
        'menuType': 1,
        'sortNo': 2,
        'icon': 'Aim'
    },
];

这里需要将数组转换成树形结构，也附上代码好了(纯手工输出，有bug还望见谅)：

/*
 * @Author: zzh
 * @Date: 2022-03-01 14:39:16
 * @LastEditors: zzh
 * @LastEditTime: 2022-04-10 17:13:03
 * @Description: 数据转换帮助类
 * @FilePath: \zh-admin\src\utils\dataConvert.ts
 */

import { MenuNode } from '../model/menuNode';

// 由于菜单数据并非一颗树，而是多棵树组成的数据，顾当成由树组成的数组的处理
const convertMenuArrToTree = (array: Array<MenuNode>) => {
    const rootMenus = array.filter(x => x.parentId === '0');
    const childrenMenus = array.filter(x => x.parentId !== '0');
    for (let i = 0; i < rootMenus.length; i++) {
        if (childrenMenus.find(x => x.parentId === rootMenus[i].id)) {
            rootMenus[i].children = getRootMenuChild(rootMenus[i].id, childrenMenus);
        } else {
            rootMenus[i].children = [];
        }
    }
    return rootMenus;
};

const getRootMenuChild = (id: string, childrenMenus: Array<MenuNode>): Array<MenuNode> => {
    const menus = childrenMenus.filter(x => x.parentId === id);
    for (let i = 0; i < menus.length; i++) {
        if (childrenMenus.find(x => x.parentId === menus[i].id)) {
            menus[i].children = getRootMenuChild(menus[i].id, childrenMenus);
        } else {
            menus[i].children = [];
        }
    }
    return menus;
};



export {
    convertMenuArrToTree,
};

展示结果：