webb2b/src/packages/pc/components/layouts/sidemenu/submenu.vue

<template>
    <template v-for="(item, index) in dataList" :key="index">
        <el-sub-menu :index="item.code" :show-timeout="100" :hide-timeout="100" v-if="item.children?.length">
            <template #title>
                <!--如果没有图标，用标题第一个字代替-->
                <template v-if="item.icon">
                    <app-icon class="menu-icon" :icon="item.icon" />
                    <span>{{ item.title }}</span>
                </template>
                <template v-else>
                    <i class="menu-icon menu-icon--text">{{ item.title.slice(0, 1) }}</i>
                    <span>{{ item.title.slice(1) }}</span>
                </template>
            </template>
            <!--如果存在子级，递归组件自身-->
            <app-submenu :data-list="item.children" />
        </el-sub-menu>
        <el-menu-item :index="item.code" @click="onMenuClick" v-else>
            <app-icon class="menu-icon" :icon="item.icon" v-if="item.icon" />
            <span>{{ item.title }}</span>
        </el-menu-item>
    </template>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import type { MenuItemRegistered } from 'element-plus'
import AppIcon from '@pc/components/base/icon/index.vue'

export default defineComponent({
    name: 'AppSubmenu',
    components: {
        AppIcon
    },
    emits: ['click'],
    props: {
        dataList: {
            type: Array as PropType<Ermcp.UserRoutes[]>,
            required: true,
        },
    },
    setup(props, { emit }) {
        // 点击菜单
        const onMenuClick = (item: MenuItemRegistered) => {
            emit('click', item.index)
        }

        return {
            onMenuClick
        }
    }
})
</script>