如何使用Container布局容器添加侧边栏(相当于3级路由) (后端返回的数据渲染)?

效果如下:

element-ui官方文档:  (前端布局)

 Element - The world's most popular Vue UI framework

如果布局是后端接口返回的数据 渲染的侧边栏呢?  如何实现?

接口返回的数据如下:

 

实现步骤:

data中定义一级路由,二级路由数组名字

 methods中调接口,渲染

接口所log出来的效果,把3个1级路由赋值给到  menu[0]

 

 

最上面html代码  (根据自己的项目进行删减)

   <el-menu
            :collapse="isCollapse"
            :collapse-transition="false"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
          >
            <el-submenu :index="v.id + ''" v-for="v in menus" :key="v.id">
              <template slot="title">
                <img
                  src="../images/home/shangcheng.png"
                  alt
                  srcset
                  style="
                    width: 22px;
                    height: 22px;
                    color: white;
                    margin-right: 5px;
                  "
                />
                <!-- <i class="el-icon-bank-card"></i> -->
                <span slot="title">{{ v.name }} </span>
              </template>

              <el-submenu
                v-for="vv in v.children"
                :index="'/' + vv.path"
                :key="vv.id"
              >
                <template slot="title"> {{ vv.name }}</template>

                <el-menu-item
                  v-for="vvv in vv.contain_orders"
                  :index="'/' + vvv.path"
                  :key="vvv.id"
                  >{{ vvv.name }}
                </el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>

 最后实现的效果

 ------------------------------------------------ 结束了----------------------------------------------