使用vue函数式组件创建
antdvue1.x
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>
antdvue 2.x
/* * 自定义子菜单1.0.0 * * 使用前必须饮用了 vue3.x.js 与 antd2.x.js */ var LmSubMenu = { name: 'LmSubMenu', props: { menuInfo: { type: Object, default: () => ({}), }, }, template: ` <a-sub-menu> <template v-if="menuInfo.icon" #icon><span :class="menuInfo.icon"></span></template> <template #title>{{ menuInfo.title }}</template> <template v-for="item in menuInfo.child" :key="item.href"> <a-menu-item v-if="!item.child" :key="item.href"> <template v-if="item.icon" #icon><span :class="item.icon"></span></template> {{ item.title }} </a-menu-item> <lm-sub-menu v-else :menu-info="item"></lm-sub-menu> </template> </a-sub-menu> ` }
使用
<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"> <template v-if="item.icon" ><span :class="item.icon"></span></template> <span>{{ item.title }}</span> </a-menu-item> <lm-sub-menu v-else :menu-info="item"></lm-sub-menu> </template> </a-menu>