管理后台 左侧sidebar组件提取 - 递归组件

主体使用elementUI 的控件

底层子组件 SidebarItem.vue

采用递归的方式遍历层级

<template>
    <div class="menu-wrapper">
        <template v-for="item in routedata">
            <div v-if="item.select">
                <template v-if="item.subs && item.subs[0]">
                    <el-submenu :index="item.url">
                        <template slot="title"><i :class="item.icon"></i>{{ item.name }}</template>
                        <sidebar-item :routedata="item.subs"></sidebar-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.url">
                        <i :class="item.icon"></i>{{ item.name }}
                    </el-menu-item>
                </template>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        name: 'SidebarItem',
        props: { routedata: Array }
    }
</script>

中层子组件 sidebar.vue

在这里进行折叠之类的配置

        <el-menu
            mode="vertical"
            unique-opened
            router
            :default-active="onRoutes"
            :collapse="isCollapse"
            background-color="#304156"
            text-color="#fff"
            active-text-color="#409EFF"
            @select="handleMenuSelected"
        >
            <sidebar-item :routedata="routedata"></sidebar-item>
        </el-menu>

之后在需要的地方进行调用

 

这里比较有意思的就是 组件在有 name 的情况下 其实是可以直接在组件内调用自己的 也就是常说的递归组件