代码
menu子组件

<template>
    <div class="menu-content">
        <!-- <el-menu @close="handleClose" :default-active="'0-0'" ref="menus" :default-openeds="openeds" mode="vertical"  > -->
        <el-menu ref="menus" :default-active="$route.path" :default-openeds="openeds" mode="vertical" @open="handleOpen">
            <template v-for="(item, index) in menuList">
                <el-submenu class="menu-group" :index="index + ''" :key="item.children[index] + '_' + index" v-if="item.children">
                    <template slot="title">
                        <i :class="item.icon && item.icon"></i>
                        <span>{{item.text}}</span>
                    </template>
                    <left-menu :menuList="item.children" v-bind="$attrs" v-on="$listeners"></left-menu>
                </el-submenu>
                <el-menu-item :key="item.href" v-else :index="item.href" @click="selectItem(item, index)">
                    <i :class="item.icon && item.icon"></i>
                    <span slot="title">{{item.text}}</span>
                </el-menu-item>
            </template>
        </el-menu>

    </div>

</template>

<script>
export default {
    name: 'LeftMenu',
    props: {
        menuList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            openeds: ['0']
        }
    },
    computed: {
        // openeds() { //默认展开所有
        //     // console.log('默认展开所有', this.menuList)
        //     // const list = []
        //     // for (const key in this.menuList) {
        //     //     list.push(key)
        //     // }
        //     // console.log('list', list)
        //     // return list

        // }
    },
    methods: {
        handleOpen(key) {
            this.openeds.push(key)
        },
        // 选中菜单
        selectItem(item, index) {
            this.$emit('handleLeftMenu', { ...item, index })
        },
        // 禁止收起菜单
        handleClose(key, keyPath) {
            this.$refs.menus.open(keyPath)
        }

    }

}
</script>

<style lang="scss" scoped>
.menu-content {
    width: 220px;
    .el-menu {
        width: 220px;
        /deep/.el-menu-item.is-active {
            border-right: 3px solid #409eff;
            background: rgb(230, 247, 255);
        }
    }
    .menu-group {
        /deep/.el-menu-item-group__title {
            color: #272727;
            font-weight: bold;
            .el-icon-location {
                // margin-right: 5px;
                color: #aeaeae;
            }
        }
    }
    // 隐藏子菜单下拉箭头
    // /deep/.el-icon-arrow-down:before {
    //     content: '';
    // }
}
</style>

父组件使用

 <div class="content">
      <!-- 左边菜单 -->
       <left-menu @handleLeftMenu='handleLeftMenu' :menuList='menuList' />
       <!-- 右边表格 -->
       <div class="right-conent">
           <router-view></router-view>
       </div>
 </div>

import LeftMenu from '@/components/leftMenu'
   components: {
        LeftMenu
    },
       data() {
        return {
            menuList: [
                {
                    text: '作业管理',
                    icon: 'el-icon-location',
                    href: '/dataAccessManage/jobManage'
                },
                {
                    text: '数据资源管理',
                    icon: 'el-icon-location',
                    children: [
                        {
                            text: '数据资源表',
                            href: '/dataAccessManage/dataResourceTable',
                            activeName: '1'
                        },
                        {
                            text: '数据资源库',
                            href: '/dataAccessManage/dataSource',
                            activeName: '1'
                        }
                    ]
                },
                {
                    text: '文件数据管理',
                    icon: 'el-icon-message',
                    children: [
                        {
                            text: '文件数据',
                            href: '/dataAccessManage/FileXs',
                            activeName: '2',
                            names: 'file'//用户页面跳转使用判断去到哪个页面,因其中有用到相同的activeName
                        },
                        {
                            text: '服务器',
                            href: '/dataAccessManage/dataSource/sys',
                            activeName: '2'
                        }
                    ]
                },
                {
                    text: '接口服务',
                    icon: 'el-icon-location',
                    href: '/dataAccessManage/InterfaceXs',
                    activeName: '3',
                    type: ['rest']
                },
                {
                    text: '标签管理',
                    icon: 'el-icon-location',
                    href: '/dataAccessManage/labelLibrary'
                }
            ]
        }
    },
   created() {
       const defaultHref = this.menuList[0].children ? this.defaultActive(this.menuList[0].children) : this.menuList[0]
       if (this.$route.path !== defaultHref.href) {
           this.$router.replace({
               path: defaultHref.href
           })
       }
   },
      methods: {
        // 页面加载时取第一个菜单的数据路径
        defaultActive(list) {
            if (list[0].children) {
                return this.defaultActive(list[0].children)
            } else {
                return list[0]
            }

        },
        //  点击左菜单
        handleLeftMenu(item) {
            if (item.href) {
                this.$router.push({
                    path: item.href,
                    query: {
                        activeName: item.activeName,
                        names: item.names,
                        type: item.type
                    }

                })
                /*兄弟页面可通过触发,bus方法需要另外安装依赖
                 this.$bus.$on('changeLeftMenu', item => {
			          this.activeName = item.activeName
			           this.names = item.names
			           this.updateVal()//接口
			       })
                */
                this.$bus.$emit('changeLeftMenu', item)
            }
        }
    },