基于elementUI的菜单（element-menu）展示（无线级）

可以通过 npm install element-menu进行安装

<script>
export default {
    name: 'menu-items',
    props: ['menuList', 'active_menu'],
    render: function(h) {
        var showMenu = menuList => {
            if (menuList.length > 0) {
                return menuList.map((menuItem, index) => {
                    if (menuItem.children.length > 0) {
                        return (
                            <el-submenu index={menuItem.id} key={ menuItem.id} title={menuItem.text}>
                                <template slot="title">
                                    <i class={`iconfont ${menuItem.icon}`}></i>
                                    <span>{menuItem.text}</span>
                                </template>
                                {showMenu(menuItem.children)}
                            </el-submenu>
                        )
                    } else {
                        return(
                            <el-menu-item index={menuItem.path} key={ menuItem.id}>
                                <i class={`iconfont ${menuItem.icon}`}></i>
                                <span slot="title">{menuItem.text}</span>
                            </el-menu-item>
                        )
                    }
                })
            }
        }
        return (
                <el-menu 
                    mode="vertical"
                    default-active={this.active_menu}
                    background-color="#383958"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    router>
                        <template style="display: block">
                            {showMenu(this.menuList)}
                        </template>
                </el-menu>
        )
    }
}
</script>

标签：showMenu,return,elementUI,menu,element,text,menuItem,menuList
来源： https://blog.51cto.com/u_14846736/2742799