noob-components/packages/manage/components/menuTree.vue

<template>
    <el-menu :default-active="active" router class="menu-tree" :text-color="state.style.menuColor"
        :background-color="state.style.menuBg" :active-text-color="state.style.menuActiveColor" :size="state.size.size">
        <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>
                        <span>{{ menu.title ? menu.title : defTitle }}</span>
                    </template>
                    <el-menu-item v-for="child in menu.children" :index="child.path" :router="router">{{ child.title
                    }}</el-menu-item>
                </el-sub-menu>
            </template>
            <template v-else>
                <el-menu-item :index="menu.path" :key="menu.path" :router="router">
                    <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"

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

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

const defTitle = "";

onMounted(() => {
    active.value = props.active;
    router.push(active.value);
})

</script>

<style scoped lang="scss">
.menu-tree {
    padding-top: 1px;
    height: 100%;
    border: none;
}

.el-menu-item.is-active {
    background-color: v-bind('state.style.menuActiveBg');
}

.el-sub-menu .el-menu-item {
    min-width: v-bind('state.size.asideWidth') !important;
    font-size: v-bind('state.size.fontSize') !important;
}
</style>