如何解决
看代码
父组件
<template>
<div class="page-header-index-wide page-header-wrapper-grid-content-main">
<a-menu
style="width: 256px"
:default-selected-keys="['1']"
:default-open-keys="['sub1']"
mode="inline"
:selected-keys="[current]"
@click="handleClick"
>
<template v-for="item in menuList">
<!-- 根节点,无子节点的情况 -->
<a-menu-item v-if="!item.helpCenterList.length" :key="item.id">
<a-icon type="pie-chart" />
<span>{{ item.title }}</span>
</a-menu-item>
<!-- 有子节点,有children的使用可折叠-->
<hepler-menu v-else :key="item.id + 'helper-sub-menu'" :menu-info="item"></hepler-menu >
</template>
</a-menu>
</div>
</template>
<script>
import { helpCenterList } from '@/api/helpCenter.js'
import HeplerMenu from './component/HeplerMenu.vue'
export default {
components: {
HeplerMenu,
},
data() {
return {
current: '1',
menuList: [],
}
},
created() {
this.helpCenterList()
},
methods: {
handleClick(e) {
console.log('click ', e)
this.current = e.key
},
async helpCenterList() {
const data = await helpCenterList()
this.menuList = data
},
},
}
</script>
子组件
<template functional>
<a-sub-menu :key="props.menuInfo.id + 'helper-sub-menu'" v-bind="$props" v-on="$listeners">
<span slot="title">
<a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
</span>
<template v-for="item in props.menuInfo.helpCenterList">
<!-- 根节点,无子节点情况 -->
<a-menu-item v-if="!item.helpCenterList.length" :key="item.id">
<a-icon type="pie-chart" />
<span>{{ item.title }}</span>
</a-menu-item>
<!-- 有子节点,有children的使用可折叠递归组件 -->
<HeplerMenu v-else :key="item.id + 'helper-menu'" :menu-info="item" />
</template>
</a-sub-menu>
</template>
<script>
import { Menu } from 'ant-design-vue';
export default {
isSubMenu: true,
name: 'HeplerMenu',
props: {
...Menu.SubMenu.props,
menuInfo: {
type: Object,
default: () => ({}),
},
},
}
</script>
<style lang="scss" scoped>
</style>