49 lines
1.0 KiB
Vue
49 lines
1.0 KiB
Vue
<template>
|
|
<el-sub-menu v-if="hasChildren" :index="item.id">
|
|
<template #title>
|
|
<el-icon v-if="item.icon">
|
|
<G3Icon :icon="item.icon" />
|
|
</el-icon>
|
|
<span class="menu-label">{{ item.label }}</span>
|
|
</template>
|
|
|
|
<MenuItem
|
|
v-for="child in item.children"
|
|
:key="child.id"
|
|
:item="child"
|
|
:parent-index="child.id"
|
|
/>
|
|
</el-sub-menu>
|
|
|
|
<el-menu-item v-else :index="item.id">
|
|
<el-icon v-if="item.icon">
|
|
<G3Icon :icon="item.icon" />
|
|
</el-icon>
|
|
<span class="menu-label">{{ item.label }}</span>
|
|
</el-menu-item>
|
|
</template>
|
|
|
|
<script setup lang="js">
|
|
import { computed } from "vue";
|
|
import G3Icon from "@/components/g3-icon/index.vue";
|
|
|
|
const props = defineProps({
|
|
item: { type: Object, required: true },
|
|
parentIndex: { type: String, default: "0" },
|
|
});
|
|
|
|
const hasChildren = props.item.children?.length > 0;
|
|
</script>
|
|
|
|
<style scoped>
|
|
.menu-label {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
:deep(.el-icon svg) {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style>
|