Ant Design Vue 递归Menu

使用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>