vue侧边栏动态生成下级菜单

循环传入的数据去生成下级菜单 

​
<template>
  <div class="headBar">
    <div class="title">
      微商城管理后台
    </div>
    <el-menu
      class="el-menu-headBar"
      <!--侧边栏的方向 水平 -->
      mode="horizontal"
      @select="handleSelect"
      background-color="#000000"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :default-active="onRoutes" router>
      <template v-for="item in items" >
        <template v-if="item.subs" >
          <el-submenu  :index="item.index">
            <template slot="title" >
             {{item.title}}
            </template>
            <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
              {{ subItem.title }}
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index">
            <label>{{ item.title }}</label>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: "1",
        items: [
          {
            icon: 'el-icon-menu',
            index: '1',
            title: '数据统计',
            subs: [
              {
                index: '/monitor',
                title: '客流展示'
              },
              {
                index: '/monitor/device',
                title: '设备采集'
              },
              {
                index: '/monitor/tv',
                title: '监控视频'
              }
            ]
          },{
            icon: 'el-icon-goods',
            index: '/product',
            title: '商品管理',
          },{
            icon: 'el-icon-goods',
            index: '/category',
            title: '类目管理',
          },{
            icon: 'fa  fa-cart-arrow-down',
            index: '/order',
            title: '订单一览'
          },{
            icon: 'fa fa-user-o',
            index: '/merchant',
            title: '商家信息'
          },{
            icon: 'el-icon-printer',
            index: '9',
            title: '微商城',
            subs:[
              {
                icon: 'el-icon-printer',
                index: '/banner',
                title: 'banner设置'
              },{
                icon: 'el-icon-printer',
                index: '/decoration',
                title: '首页装修'
              },{
                icon: 'el-icon-printer',
                index: '/message',
                title: '消息设置'
              }
            ]
          },{
            icon: 'el-icon-printer',
            index: '10',
            title: '线下店',
            subs:[
              {
                icon: 'el-icon-printer',
                index: '/device',
                title: '设备管理'
              },{
                icon: 'el-icon-printer',
                index: '/advertise',
                title: '广告管理'
              },{
                icon: 'el-icon-printer',
                index: '/version',
                title: '版本管理'
              }
            ]
          },{
            icon: 'el-icon-printer',
            index: '/largeUI',
            title: '大屏'
          },{
            icon: 'el-icon-printer',
            index: '/coupon',
            title: '优惠券'
          }
        ],
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    computed:{
      onRoutes(){
        return this.$route.path.replace('/','');
      }
    }
  }
</script>

<style scoped>
  .el-menu-headBar {
    width: 80%;
    min-width: 950px;
    font-size: 12px;
    border-bottom: 1px #000000;
  }

  .headBar {
    width: 100%;
    height: 50px;
    display: flex;
    background-color: #000000;
  }

  .title {
    background-color: #ffdb15;
    color: #000;
    height: 100%;
    min-width: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 5px;
    font-size: 17px;
  }
</style>

​