ng版本:
关键代码:
<ng-container *ngTemplateOutlet="menuItemNode; context: {menus_:menus}"></ng-container>
<ng-template #menuItemNode let-theMenus="menus_">
<ng-container *ngFor="let menu of theMenus">
<li *ngIf='!menu.children || menu.children.length==0'>
<span>
<i></i>
<span>{{menu.name}} </span>
</span>
</li>
<li *ngIf="menu.children && menu.children.length!=0">
<span>
<i></i>
<span>{{menu.name}} </span>
</span>
<ul style="padding-left: 45px">
<ng-container *ngTemplateOutlet="menuItemNode; context: {menus_:menu.children}"></ng-container>
</ul>
</li>
</ng-container>
</ng-template>
vue3版本:
关键代码:
sub.vue
<template>
<template v-for="(item, index) of data ?? []" :key="index">
<a-sub-menu v-if="item.children && item.children.length" :key="item.key">
<template #title>
<span>{{ item.title }}</span>
</template>
<sub-menu :data="item.children"></sub-menu>
</a-sub-menu>
<a-menu-item v-else @click="log(item)" :key="'link-'+item.key">
<span>{{ item.title }}</span>
</a-menu-item>
</template>
</template>
<script lang="ts">
/** 递归菜单 */
export default {
name: 'sub-menu'
};
</script>
<script lang="ts" setup>
import { message } from 'ant-design-vue';
const props = defineProps<{ data?: Array<any> }>();
const log = (item) => {
message.info(JSON.stringify(item));
};
</script>
parent.vue
<template>
<div class="s-leftbar">
<a-menu :multiple="false" v-model:openKeys="vm.openKeys" v-model:selectedKeys="vm.selectedkeys" mode="inline" @click="handleClick" @openChange="onOpenChange">
<sub-menu :data="vm.menus"></sub-menu>
</a-menu>
</div>
</template>
<script setup lang="ts">
import SubMenu from './sub.vue';
import { reactive, ref, toRefs, watch } from 'vue';
import { useRoute } from 'vue-router';
const vm = reactive({
menus: [],
openKeys: [], //默认展开
selectedkeys: []
});
vm.menus = [
{
key: 1,
title: '机组分析',
children: [{ key: 101, title: '基本面分析', children: [{ key: 10101, title: '披露信息展示' }] }]
},
{
key: 2,
title: '数据管理',
children: [{ key: 201, title: '电厂机组数据' }]
}
];
// 菜单事件
const handleClick = ({ item, key, keyPath }) => {};
const onOpenChange = (openKeys: string[]) => {};
</script>