<template>
    <el-sub-menu :index="menuItem.id?.toString()">
        <template #title>
            <span>{{ menuItem.name }}</span>
        </template>
        <template v-for="(child, index) in menuItem.children" :key="index">
            <left-menu-item v-if="child.children && child.children.length"></left-menu-item>
            <el-menu-item v-else
                :index="child.url"
            >
                <span>{{ child.name }}</span>
            </el-menu-item>
        </template>
    </el-sub-menu>
</template>

<script setup>
    import { defineProps } from 'vue';
    const props = defineProps({
        menuItem: {
            type: Object,
            default: {}
        }
    })
</script>

<style lang="less" scoped>
</style>