Ant Design Vue 2.x 递归Menu

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

 

Ant Design Vue 2.x 递归Menu

上一篇:Scanner 对象


下一篇:Page Objects实战