vue+elementUI 做的遞歸組件

廢話少說，直接上最新鮮的干貨

當然，你得提前安裝好bootstrap，router，element-ui，vue-axios

1.上遞歸組件，此處參考了某位大神的代碼，具體不知道是誰，因為到處都有人用

<template>
    <div>

    <template v-for='menu in menuList'>
        <!-- 如果當前有子菜單，則顯示 el-submenu ，在el-subment 里調用 遞歸組件 -->
        <el-submenu
                v-if='menu.children.length>0'
                :index='menu.name'
                :key="menu.id"
        >
            <template slot="title" >
                <i :class="menu.icon"></i>
                {{menu.name}}
            </template>
            <!-- 調用自身  此處是重點-->

            <MenuTree :menuList='menu.children'></MenuTree>

        </el-submenu>
        <!-- 如果沒有子菜單，則顯示當前內容 -->
        <el-menu-item
                v-else
                :index='menu.url'
                :key='menu.id'
        >
            <i :class="menu.icon"></i>
            {{menu.name}}
        </el-menu-item>

    </template>
    </div>
</template>

<script>
    export default {
        name: "MenuTree",
        props: {
            menuList: {
                type: Array,
                required: false
            }
        }
    }
</script>

<style scoped>

</style>

2.子組件菜單（Menus）

<template>

        <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-menu
                    router
                    mode="vertical"
                    background-color="#551A8B"
                    text-color="#FFFFFF"
                    active-text-color="#409EFF"
                    v-if="menuList"
            >
<!--                <sidebar-item v-for="menu in menuList" :key="menu.id" :item="menu" />-->
                <MenuTree :menuList="menuList"></MenuTree>
            </el-menu>
        </el-scrollbar>

</template>
<script>

    import MenuTree from "./MenuTree";
    export default {
        name:'Menus',
        components: {

            MenuTree,
        },
        props:{
            menuList: {
                type: Array,
                required: false
            }
        }
    }
</script>
<style >

    a {
        display: inline-block;
        width: 100%;
        overflow: hidden;
    }
    .el-menu {
        border: none;
        height: 100%;
        width: 100% !important;
    }
    .is-active > .el-submenu__title{
        color: #f4f4f5!important;
    }

</style>

3.父組件(App.Vue)引用

<template>
    <el-container>
        <el-header>
            XXXXXX
        </el-header>
        <el-container>
            <el-aside >
                <Menus :menuList="menuList"></Menus>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import Menus from "./views/Menus";

    export default {
        name: 'app',
        components: {
            Menus,
        },

        props: {
            menuList: {
                type: Array,
                required: false
            }
        },
        mounted(){
            this.axios.get('/menu/list')
                .then(resp => {
                    this.menuList = resp.data.menuList;
                })
        }

    }
</script>

<style>
    .el-header {
        background-color: #0000AA;
        color: #ffffff;
        line-height: 60px;
        font-size: 28px;
    }
    .el-aside {
        background-color: #e3e3e3;
        width: 200px !important;
    }

    body .el-table th.gutter{
        display: table-cell!important;
    }
    body .el-table colgroup.gutter {
        display: table-cell !important;
    }

</style>

4.總結

遞歸組件得重中之重，父組件與子組件、遞歸組件中都有共同的props，傳值的過程：父組件menuList --> 菜單組件menuList --> 遞歸組件使用menuList