antdesign侧边栏菜单，需根据后台返回的数据动态加载菜单列表，在循环填充时会遇到子菜单项<a-sub-menu>拆分问题， 查阅官方文档，在单文件递归菜单中，使用函数式组件递归生成菜单

 "menuList": [{"name": "监控系统","url": "http://192.168.1.100:9999","iconType": "laptop",},{"name": "模块接口","url": null,"iconType": "bars","sidebars": [{"name": "订单模块","url": "http://192.168.1.100:8890//swagger-ui.html","iconType": "italic","children": []}]},{"name": "关于","url": "http://192.168.1.100:9999/about","iconType": "info",}]

根据上述后台传递的json数组， 主组件中代码如下：

<template v-for="item in menuList"><a-menu-item v-if="!item.sidebars.length" :key="item.name"><a-icon :type="item.iconType" /><span>{{item.name}}</span></a-menu-item><sub-menu v-else :menu-info="item" :key="item.name"/>
</template>

其中的<sub-menu>由子组件定义，如下：

<template functional><a-sub-menu:key="props.menuInfo.name"><span slot="title"><a-icon :type="props.menuInfo.iconType" /><span>{{ props.menuInfo.name }}</span></span><template v-for="item in props.menuInfo.sidebars"><a-menu-item:key="item.name"><span>{{ item.name }}</span></a-menu-item></template></a-sub-menu>
</template>
<script>
export default {props: ['menuInfo'],
};
</script>

在<sub-menu>源文件中

<template functional><a-sub-menu:key="props.menuInfo.key"><span slot="title"><a-icon type="mail" /><span>{{ props.menuInfo.title }}</span></span><template v-for="item in props.menuInfo.children"><a-menu-itemv-if="!item.children":key="item.key"><a-icon type="pie-chart" /><span>{{ item.title }}</span></a-menu-item><sub-menuv-else:key="item.key":menu-info="item"/></template></a-sub-menu>
</template>
<script>
export default {props: ['menuInfo'],
};
</script>

其中的<sub-menu>中还包含递归组件