<template>
|
<div>
|
<a-sub-menu v-if="item.children.length > 0" :key="item.key">
|
<template #title>
|
<div class="my-display">
|
<span>{{ item.title }}</span>
|
</div>
|
</template>
|
<a-menu-item
|
v-for="child in item.children"
|
:key="child.key"
|
@click="$emit('click', child)"
|
style="display: flex; justify-content: space-between; padding-left: 28px"
|
>
|
<div class="my-display">
|
<span>{{ child.title }}</span>
|
<span v-if="child.total > 0">{{ child.total }}</span>
|
</div>
|
</a-menu-item>
|
</a-sub-menu>
|
<a-menu-item v-else :key="item.key" @click.stop="$emit('click', item)">
|
<div class="my-display">
|
<span>{{ item.title }}</span>
|
<span v-if="item.total > 0" class="my-left">{{ item.total }}</span>
|
</div>
|
</a-menu-item>
|
</div>
|
</template>
|
|
<script setup>
|
defineProps(['item']);
|
</script>
|
|
<style scoped>
|
.my-display {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.my-left {
|
margin-left: 5px;
|
}
|
</style>
|
