drawing-board-service/example/fuse/views/slide/slide-item.vue

<template>
  <el-sub-menu :index="data.value || data.name" v-if="data.children?.length">
    <template #title>
      <p class="center">{{ data.name }}</p>
    </template>
    <SlideItem v-for="item in data.children" :data="item" />
  </el-sub-menu>
  <el-menu-item v-else :index="data.value">
    <p class="center">{{ data.name }}</p>
  </el-menu-item>
</template>

<script lang="ts" setup>
import { ElSubMenu, ElMenuItem } from "element-plus";
import { MenuItem } from "@/example/fuse/views/slide/menu.ts";
defineProps<{ data: MenuItem }>();
</script>

<style scoped lang="scss">
.center {
  width: 100%;
}
</style>