noob-components/packages/manage/menu-tree/src/menuTree.vue

<template>
    <el-menu :default-active="active" class="menu-tree">
        <template v-for="menu in data">
            <template v-if="menu.children && menu.children.length > 0">
                <el-sub-menu :index="menu.path" :key="menu.path">
                    <template #title>
                        <Icon :color="style[type].menuColor" :name="menu.icon ? menu.icon : style[type].menuDefaultIcon" />
                        <span>{{ menu.title ? menu.title : defTitle }}</span>
                    </template>
                    <menu-tree :menus="menu.children"></menu-tree>
                </el-sub-menu>
            </template>
            <template v-else>
                <el-menu-item :index="menu.path" :key="menu.path" @click="clickMenu(menu)">
                    <Icon :color="style[type].menuColor" :name="menu.icon ? menu.icon : style[type].menuDefaultIcon" />
                    <span>{{ menu.title ? menu.title : defTitle }}</span>
                </el-menu-item>
            </template>
        </template>
    </el-menu>
</template>
<script setup lang="ts">
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue"
import * as style from "./style";

const store = useStore()
const props = defineProps({
    data: {
        type: Array<any>(),
        default: null
    },
    type: {
        type: String,
        default: 'def',
    },
});

const router = useRouter();
const clickMenu = (menu) => {
    router.push(menu.path);
};
const active = ref("");

const defTitle = "";

onMounted(() => {
    active.value = props.data[0].path;
})

</script>

<style scoped lang="scss">
.el-sub-menu .icon,
.el-menu-item .icon {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
}

.is-active>.icon {
    color: var(--el-menu-active-color) !important;
}

.el-menu-item.is-active {
    background-color: v-bind('style[type].menuActiveBackground');
}
</style>