使用vue函数式组件创建
Vue.component(‘LmSubMenu‘, { functional: true, render: function (createElement, context) { console.log(context) let children = []; context.props.menuInfo.child.forEach((item, index) => { if (item.child) { children.push( createElement(‘lm-sub-menu‘, { props: {menuInfo:item} }) ) } else { children.push(createElement(‘a-menu-item‘, { //普通html特性 attrs: { key: item.href, }, }, item.title)) } }); return createElement(‘a-sub-menu‘, [ createElement(‘span‘, { slot: ‘title‘ }, [ createElement(‘a-icon‘, { //普通html特性 attrs: { type: ‘team‘, }, }), createElement(‘span‘, context.props.menuInfo.title)]), ...children ]) } })
使用
<a-menu class="a-menu" mode="inline" theme="dark" :inline-collapsed="collapsed"> <template v-for="item in initinfo.menuInfo"> <a-menu-item v-if="!item.child" :key="item.href"> <a-icon type="pie-chart"></a-icon> <span>{{ item.title }}</span> </a-menu-item> <lm-sub-menu v-else :menu-info="item"></lm-sub-menu> </template> </a-menu>