el-menu封装多级菜单

效果图

1.leftMenu组件（父组件）

<template>
    <el-menu :default-openeds="defaultOpeneds" :default-active="defaultActive" @select="selectMenu" v-loading="loading">
        <menuItem :data="menuList">
        </menuItem>
    </el-menu>
</template>
<script>
// 引入递归菜单组件
import menuItem from '@/views/components/menuItem.vue'
export default {
    name: 'LeftMenu',
    components: { menuItem },
    props: {
        type: {
            type: Number,
            default: 1
        },
        setFirstOpen: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            menuList: [
                {
                    id: 1,
                    name: '供水总量汇总表',
                    hasicon:true,
                    children: [
                        {
                            id: 11,
                            name: '源水报表',
                            children: [],
                        },
                        {
                            id: 12,
                            name: '水厂报表',
                            children: [],
                        },
                        {
                            id: 13,
                            name: 'DMA报表',
                            children: [],
                        },
                        {
                            id: 14,
                            name: '行政单元',
                            children: [],
                        },
                        {
                            id: 15,
                            name: '水质报表',
                            children: [],
                        },

                    ]
                },
                {
                    id: 2,
                    name: '水费征收统计表',
                    hasicon: true,
                    children: [
                        {
                            id: 21,
                            name: '水厂报表',
                            children: [],
                        },
                        {
                            id: 22,
                            name: '用水报表',
                            children: [],
                        },
                        {
                            id: 23,
                            name: '行政单元',
                            children: [],
                        },
                    ]
                }
            ],
            loading: false,
            defaultOpeneds: ['11'],
            defaultActive: '11',
        }
    },
    watch: {},
    methods: {
        // 菜单选择事件
        selectMenu(id) {
            this.$emit('getData', id)
        },
    },
}
</script>
<style scoped>
.left .el-submenu .el-menu-item {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
</style>
    
    
    

2.递归组件（子组件）

<template>
    <div>
        <template v-for="(item, index) in data">
            <el-submenu :key="item.id" :index="String(item.id)" v-if="item.children.length > 0">
                <template slot="title">
                    <i :class="`iconfont icon-${pinyin.getFullChars(item.name).toLowerCase()}`" v-if="item.hasicon"></i>
                    <span>{{ item.name }}</span>
                </template>
                <menuItem :data="item.children">
                </menuItem>
            </el-submenu>
            <el-menu-item :key="item.id" v-else :index="String(item.id)">
                <i :class="`iconfont icon-${pinyin.getFullChars(item.name).toLowerCase()}`" v-if="item.hasicon"></i>
                <span slot="title">{{ item.name }}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
let pinyin = require('js-pinyin');
export default {
    name: "menuItem",
    props: {
        data: {
            type: Array,
            default: [],
        },
    },
    created(){
        this.pinyin = pinyin
    }
};

</script>
<style lang="scss" scoped>
/deep/.el-menu-item.is-active {
    background-color: #e6f7ff;
}

/deep/.el-menu-item:focus,
.el-menu-item:hover,
.el-menu-item:active {
    outline: 0;
    background-color: #e6f7ff;
}

/deep/.el-submenu.is-active .el-submenu__title {
    color: #1677ff;
}

/deep/.el-submenu.is-active .el-submenu__title i {
    color: #1677ff;
}

.el-submenu__title i {
    margin-right: 6px;
}
</style>

3.引用

<LeftMenu @getData="getList"></LeftMenu>
//获取到当前点击菜单的id和相关的值
 getList(id, components, selectedName) {
      console.log(id, components, selectedName);
},