vue3 el-menu element-plus多级菜单递归写法

源码 https://github.com/ohoherror/...

menuItem.js
核心：判断菜单还有没有children,有children就递归，没有就展示菜单名

<template>
    <template v-for="item in arrList">
        <el-menu-item v-if='!item.children' @click="toMenu(item)" :key="'/' + item.url" :index="'/' + item.url">
            <span>{{ item.name }}</span>
        </el-menu-item>
        <el-sub-menu :index="item.menuId.toString()" v-else>
            <template #title><span>{{ item.name }}</span></template>
            <menu-item :arrList="item.children" @toMenu="toMenu"></menu-item>
        </el-sub-menu>
    </template>
</template>

<script  setup>
import { pathArr } from '@/router/routes'
import menuItem from './menuItem.vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
//vue3 props的获取
const props = defineProps({
    arrList: Array,
});
const router = useRouter()
let store = useStore()

const toMenu = (ele) => {
    let checkedList = store.state.tabList
    console.log(checkedList)
    if (pathArr().includes('/' + ele.url)) {
        let ids = checkedList.map(ele => ele.menuId)
        //判断tabs是否存在该菜单
        if (!ids.includes(ele.menuId)) {
            checkedList.push(ele)
        }
        store.commit('setTabList', checkedList)
        router.push({ path: '/' + ele.url })
    } else {
        ElMessage.error('暂无组件')
    }
}
</script>

leftNav.js 左侧菜单总列表

<template>
    <el-row class="">
        <el-col>
            <el-menu :collapse="isCollapse" class="el-menu-vertical-demo" :default-active="curPath" @open="handleOpen"
                @close="handleClose">
                <el-sub-menu v-for="item in menuList" :key="item.menuId" :index="item.menuId.toString()">
                    <template #title>
                        <span>{{ item.name }}</span>
                    </template>
                     <!-- 此处调用menu-item组件 -->
                    <menu-item :arrList="item.children"></menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script  setup>
import { reactive, ref, onMounted, watch } from 'vue'
import navApi from '@/api/navApi'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
import { toRaw } from '@vue/reactivity'
import { listMenu } from '../../../config/menu'
import menuItem from './menuItem.vue'

const router = useRouter()
const menuList = ref([])

let curPath = ref()
const isCollapse = ref(false)
onMounted(() => {
    if (router.name !== 'login') {
        getNav()
    }

})
//路由监听
watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
    curPath.value = newValue
}, { immediate: true })


const handleOpen = () => {

}
const handleClose = () => {

}
const getNav = () => {
    menuList.value = listMenu
}
</script>

菜单列表测试数据menu.js

export const listMenu = [{
    menuId: 1,
    name: "系统管理",
    open: null,
    orderNum: 0,
    parentId: 0,
    parentName: null,
    perms: null,
    type: 0,
    url: null,
    children: [
        {
            icon: "role",
            children: [
                {
                    icon: "role",
                    children: [
                        {
                            icon: "role",
                            children: null,
                            menuId: 144,
                            name: "测试管理",
                            open: null,
                            orderNum: 2,
                            parentId: 44,
                            parentName: null,
                            perms: null,
                            type: 1,
                            url: "sys/test",
                        }
                    ],
                    menuId: 44,
                    name: "子系统管理",
                    open: null,
                    orderNum: 2,
                    parentId: 3,
                    parentName: null,
                    perms: null,
                    type: 1,

                }
            ],
            menuId: 3,
            name: "角色管理",
            open: null,
            orderNum: 2,
            parentId: 1,
            parentName: null,
            perms: null,
            type: 1,

        },
        {
            icon: "menu",
            children: null,
            menuId: 4,
            name: "菜单管理",
            open: null,
            orderNum: 3,
            parentId: 1,
            parentName: null,
            perms: null,
            type: 1,
            url: "sys/menu",
        }
    ]
}]