[vue]vue+element-ui实现后台管理系统动态生成侧边栏

<!-- 页面主体区域-->
<el-container>
     <!--  侧边栏-->
     <el-aside width="200px">
          <!-- 侧边栏菜单区域-->
          <el-menu background-color="#333744" text-color="#fff" active-text-color="#3B93F4">
                 <!--一级菜单-->
                 <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
                        <!-- 一级菜单模板区-->
                        <template slot="title">
                             <!--  图标-->
                             <i :class="iconsObj[item.id]></i>
                             <!-- 文本-->
                             <span>pw_item.authName</span>
                        </template>
                         <!--  二级菜单-->
                        <el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key="subItem.id">
                         <template slot="title">
                              <!--  图标-->
                              <i class="el-icon-menu"></i>
                              <!--  文本-->
                              <span>pw_subItem.authName</span>
                          </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
<!--            右侧内容-->
            <el-main></el-main>
        </el-container>

data(){
            return {
                //左侧菜单数据
                menulist:[],
                //由于后端未返回图标字段，因此通过id来指向对应菜单
                iconsObj:{
                    '125':'iconfont icon-user',
                    '103':'iconfont icon-tijikongjian',
                    '101':'iconfont icon-shangpin',
                    '102':'iconfont icon-danju',
                    '145':'iconfont icon-baobiao',
                },
            }
        },
        created() {
            this.getMenuList()
        },
        methods:{
            //获取所有的菜单
            async getMenuList(){
                const {data:res} = await this.$http.get('menus');
                console.log(res);
                if(res.meta.status !== 200) return this.$message.error((res.meta.msg))
                this.menulist = res.data
            }
        }