递归组件实现Element树形Menu菜单

分享一波动态生成侧边栏 并且着重分享一个大坑！

1：模拟菜单数据（开发情况下获取后台数据）

const menuList = [
    {
        title: '首页',
        key: '/home',
        icon: 'el-icon-s-home'
    },
    {
        title: '表单',
        key: '/form',
        icon: 'el-icon-film',
        children: [
            {
                title: '登录',
                key: '/form/login',
                icon:'el-icon-s-custom',
                children:[
                    {
                        title:'普通登录',
                        icon:'el-icon-pie-chart'
                    },
                    {
                        title:'高级登录',
                        icon:'el-icon-collection-tag'
                    }
                ]
            },
            {
                title: '注册',
                key: '/form/reg',
                icon:'el-icon-s-opportunity'
            }
        ]
    },
    {
        title: '表格',
        key: '/table',
        icon: 'el-icon-receiving',
        children: [
            {
                title: '基础表格',
                key: '/table/basic',
                icon:'el-icon-date'
            },
            {
                title: '高级表格',
                key: '/table/high',
                icon:'el-icon-document-copy'
            }
        ]
    },
    {
        title: '富文本',
        key: '/rich',
        icon:'el-icon-wallet'
    },
    {
        title: '城市管理',
        key: '/city',
        icon: 'el-icon-office-building'
    },
    {
        title: '订单管理',
        key: '/order',
        icon: 'el-icon-notebook-1',
        children: [
            {
                title: '订单详情',
                key: 'detail',
                icon:'el-icon-reading'
            },
            {
                title: '结束订单',
                key: 'finish',
                icon:'el-icon-data-line'
            }
        ]
    },
    {
        title: '车辆地图',
        key: '/bikeMap',
        icon:'el-icon-place'
    },
    {
        title: '权限设置',
        key: '/permission',
        icon:'el-icon-key'
    },
];
export default menuList;

2：页面主体文件（Main.vue）

3:递归组件（MenuList）

注意 

el-menu 和 子级元素 之间不能加div 最初设想是el-menu 在父组件中  子组件负责动态生成其子元素，发现不可行原因在于template下面层级只允许出现一个子级元素，会出现收缩菜单的时候字体无法隐藏 

所以解决办法是把el-menu 挪到递归组件中来！