Vue 循环添加菜单和子菜单

<template>
  <div class="mainHeader">
    <div class="logo">
      <img src="@/assets/img/headerlogo.png" />
      <p>{{titlename}}</p>
    </div>
    <el-menu :default-active="activeIndex2"
             class="el-menu-demo headerMenu"
             mode="horizontal"
             @select="handleSelect"
             background-color="#1c2531"
             text-color="#fff"
             active-text-color="#ffd04b">
      <component class="menu-item"
                 v-for="value in navMenuItem"
                 :key="value.id"
                 :index="value.id"
                 :show-timeout="1"
                 :hide-timeout="1"
                 :is="
          value.children && value.children.length > 0
            ? 'el-submenu'
            : 'el-menu-item'
        "
                 :disabled="value.disabled">
        <template slot="title">
          <i :class="[value.pic]"
             @click="displayInfo(value)"></i>
          <span @click="displayInfo(value)">{{ value.name }}</span>
        </template>
        <template v-if="
            value.children && value.children.length > 0 && value.type === 'card'
          ">
          <div v-for="info in value.children"
               :key="info.id"
               class="elcardGroup">
            <el-card class="box-card">
              <div>
                <div slot="header"
                     class="clearfix">
                  <i :class="info.pic"></i>
                  <span class="cardheaderText">{{ info.name }}</span>
                </div>
                <hr />
                <div v-for="infoItem in info.children"
                     :key="infoItem.id"
                     class="text item"
                     @click="displayInfo(infoItem)">
                  {{ infoItem.name }}
                </div>
              </div>
            </el-card>
          </div>
        </template>
        <template v-if="
            value.children &&
              value.children.length > 0 &&
              value.type === 'menuItem'
          ">
          <el-menu-item class="menu-item"
                        v-for="v in value.children"
                        :key="v.id"
                        :index="v.id"
                        @click="displayInfo(v)">
            <i :class="[v.pic]"></i>
            <span slot="title">{{ v.name }}</span>
          </el-menu-item>
        </template>
      </component>
    </el-menu>
    <div class="user">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img src="@/assets/img/headerNavigation/user.png"
               style="width: 35px; height: 35px" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <kys-text-button class="dropdownitem"
                           @click.native="logout()">
            <img src="@/assets/img/headerNavigation/user.png"
                 slot="buttonicon" />
            <span slot="buttontext">退出登录</span>
          </kys-text-button>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <inform-search ref="search" />
    <inform-statistic ref="statistic" />
  </div>
</template>

而数据配置在另外一个js文件中

import Vue from "vue";
const headerMenuList = [
  {
    id: "0",
    pic: "el-icon-s-home",
    name: "首页",
    url: "",
    disabled: false,
  },
  {
    id: "1",
    pic: "el-icon-s-order",
    name: "信息查询",
    type: "",
    disabled: false,
  },
  {
    id: "6",
    pic: "el-icon-s-order",
    name: "信息统计",
    type: "",
    disabled: false,
  },
  {
    id: "7",
    pic: "el-icon-s-order",
    name: "信息展示",
    type: "card",
    disabled: false,
    children: [
      {
        id: "7-1",
        pic: "el-icon-office-building",
        name: "企业点",
        children: [
          {
            id: "7-1-1",
            name: "企业分布",
            url: "",
          },
          {
            id: "7-1-2",
            name: "ArcGIS图层数据查询",
            url: "",
          },
          {
            id: "7-1-3",
            name: "POI信息查询",
            url: "",
          },
        ],
      },
      {
        id: "7-2",
        pic: "el-icon-mobile",
        name: "动态数据",
        children: [
          {
            id: "7-2-1",
            name: "飞行编队",
            url: "",
          },
        ],
      },
      {
        id: "7-3",
        pic: "el-icon-office-building",
        name: "地形数据",
        children: [
          {
            id: "7-3-1",
            name: "地形数据",
            urltype: "arcgis",
            url:"arcgis/rest/services/s0605/MapServer",
          },
        ],
      },
    ],
  },
  {
    id: "2",
    pic: "el-icon-school",
    name: "模型",
    type: "card",
    disabled: false,
    children: [
       {
        id: "2-1",
        pic: "el-icon-office-building",
        name: "城市建筑",
        children: [
          {
            id: "2-1-1",
            name: "开发区",
            url: "tileset.json",
          },
        ],
      },
    ],
  },
  {
    id: "3",
    pic: "el-icon-s-data",
    name: "数据分析",
    type: "card",
    disabled: false,
    children: [
      {
        id: "3-1",
        pic: "el-icon-finished",
        name: "综合分析",
        children: [
          {
            id: "3-1-1",
            name: "事故模拟",
            url: "",
          },
          {
            id: "3-1-2",
            name: "淹没分析",
            url: "",
          },
        ],
      },
      {
        id: "3-2",
        pic: "el-icon-finished",
        name: "专项数据",
        children: [
          {
            id: "3-2-1",
            name: "含水层",
            url: "",
          },
          {
            id: "3-2-2",
            name: "经济特区",
            url: "",
          },
         
        ],
      },
    ],
  },
  {
    id: "4",
    pic: "el-icon-paperclip",
    name: "综合态势",
    type: "menuItem",
    disabled: false,
    children: [
      {
        id: "4-1",
        pic: "el-icon-magic-stick",
        name: "热力图",
        url: "",
      },
      {
        id: "4-2",
        pic: "el-icon-set-up",
        name: "区域分布",
        url: "",
      },
     
    ],
  },
  {
    id: "5",
    pic: "el-icon-thumb",
    name: "图上标绘",
    url: "",
    disabled: false,
  },
];
export default {
  headerMenuList,
};