vue后台管理系左侧这边栏 

1.这个是获取左侧边栏

 <template v-for='menu in menuList'>

            <!--{{menu.menuChilds.length}}-->

            <!--如果当前有子菜单，则显示子菜单el-submenu，并调用递归（调用自身组件）-->

            <el-submenu v-if='menu.menuChilds.length>0' :index='menu.menuurl' :key="menu.menuid" >

                <template slot="title">

                    <i v-if="menu.menulmgclass" :class="menu.menulmgclass"></i>

                    <span slot="title">{{ menu.menuname }}</span>

                </template>

                <!-- 调用自身组件-->

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

            </el-submenu>

            <!--如果没有子菜单，则显示一级菜单-->

            <el-menu-item v-else :index='menu.menuurl' :key='menu.menuid'>

                <i v-if="menu.menulmgclass" :class="menu.menulmgclass"></i>

                <span slot="title">{{ menu.menuname }}</span>

            </el-menu-item>

        </template>

 export default{

        components: {MenuTree},

        name: 'MenuTree',

        data(){

            return {}

        },

        props:{

            menuList: {

                type: Array,

                required: false

            }

        },

        methods:{

        }

    }

2.这个是导入这个组件的

<el-aside>

   <el-menu

                :default-active="$route.path"

                unique-opened="true"

                router

                mode="vertical"

                text-color="rgb(71,71,71)"

                active-text-color="rgb(1,179,163)"

                v-if="menuList"

                background-color="white"

                @open="handleOpen"

                @close="handleClose"

                class="el-menu-vertical-demo menu">

            <!--主页内容-->

            <router-link to='/index'>

                <el-menu-item>

                    <i class="el-icon-house"></i>

                    <span slot="title">主页</span>

                </el-menu-item>

            </router-link>

            <MenuTree :menuList="menuList"></MenuTree>

        </el-menu>

</el-adisde>