antdesign側邊欄菜單,需根據後臺返回的數據動態加載菜單列表,在循環填充時會遇到子菜單項<a-sub-menu>拆分問題, 查閱官方文檔,在單文件遞歸菜單中,使用函數式組件遞歸生成菜單javascript
"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數組, 主組件中代碼以下:html
<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>由子組件定義,以下:java
<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>源文件中json
<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-item v-if="!item.children" :key="item.key" > <a-icon type="pie-chart" /> <span>{{ item.title }}</span> </a-menu-item> <sub-menu v-else :key="item.key" :menu-info="item" /> </template> </a-sub-menu> </template> <script> export default { props: ['menuInfo'], }; </script>
其中的<sub-menu>中還包含遞歸組件數組