element 中 el-menu 組件的無限極迴圈

實現思路主要組件嵌套（組件自己調用自己）

　　下麵是組件所需要的數據

{
  "code": 1,
  "data": {
    "menuVoList": [
      {
        "childList": [
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587610158,
              "id": "2f006aed6a114579bd8b9809724428f7",
              "name": "系統用戶許可權管理",
              "parentId": "6d68079a16b94292990f612237bd048e",
              "path": "/userallotrole",
              "updateBy": "0-1",
              "updateTime": 1587610221
            }
          },
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587605059,
              "id": "c948265cdf27420eb7b6b502292c5990",
              "name": "系統用戶管理",
              "parentId": "6d68079a16b94292990f612237bd048e",
              "path": "/user",
              "updateBy": "0-1",
              "updateTime": 1587610230
            }
          }
        ],
        "menu": {
          "createBy": "0-1",
          "createTime": 1587605025,
          "id": "6d68079a16b94292990f612237bd048e",
          "name": "用戶管理",
          "parentId": "",
          "path": "/#",
          "updateBy": "0-1",
          "updateTime": 1587610117
        }
      },
      {
        "childList": [
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587469457,
              "id": "d4b70897052742bb860cf14cea8cf131",
              "name": "新建/修改菜單",
              "parentId": "82e5ca1ab2e04d8faffeb973286771ec",
              "path": "/newMenu",
              "updateBy": "0-1",
              "updateTime": 1587469457
            }
          }
        ],
        "menu": {
          "createBy": "0-1",
          "createTime": 1587469385,
          "id": "82e5ca1ab2e04d8faffeb973286771ec",
          "name": "菜單管理",
          "parentId": "",
          "path": "",
          "updateBy": "0-1",
          "updateTime": 1587469426
        }
      },
      {
        "childList": [
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587468494,
              "id": "3a092edd120d40b79322d8486e53e5a1",
              "name": "系統角色管理",
              "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
              "path": "/setrole",
              "updateBy": "0-1",
              "updateTime": 1587469340
            }
          },
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587469360,
              "id": "61d0e4fecbed407d89b1ea5878072374",
              "name": "設置角色許可權",
              "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
              "path": "/authorization",
              "updateBy": "0-1",
              "updateTime": 1587469360
            }
          },
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587469520,
              "id": "a1a2f6bcbfba4a7f9178ef03ea0fe5b0",
              "name": "許可權管理",
              "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
              "path": "/resource",
              "updateBy": "0-1",
              "updateTime": 1587624251
            }
          }
        ],
        "menu": {
          "createBy": "0-1",
          "createTime": 1587468417,
          "id": "ce5704f647d341fe8334ad12c6dd4a6b",
          "name": "角色管理",
          "parentId": "",
          "path": "",
          "updateBy": "0-1",
          "updateTime": 1587468417
        }
      }
    ]
  },
  "message": "成功"
}

　現在我們來設置組件 （在 componet 文件夾裡面建一個 menu.vue） 代碼如下

<template>
  <div>
    <template v-for="value in menuData">
      <el-submenu v-if="value.childList.length > '0'" :index="value.menu.name"> //判斷傳進來的數據中 childList 數組length 是否大於零， 如果大於零表示 不是不需要在迴圈下去了 
        <template slot="title">
          <i class="el-icon-s-tools" />
          <span slot="title">{{ value.menu.name }}</span>
        </template>
        <MenuTree :menu-data="value.childList" />
      </el-submenu>
      <el-menu-item v-else :index="value.menu.path">
        <span slot="title">{{ value.menu.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  name: 'MenuTree',
  props: ['menuData']
}
</script>
<style lang="scss" >
.el-submenu__title i {
  color: #fff;
}
.el-menu--collapse {
  width: 54px;
}
</style>

　　接下來 在需要使用 menu 組件的地方引入剛纔定義的組件

<template>
      <el-menu
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        background-color="#4A5A74"
        active-text-color="#ffd04b"
        text-color="#fff"
        :unique-opened="true"
        :default-active="this.$route.path"
        @select="handleSelect"
      >
        <menuTree :menu-data="list" />
      </el-menu>
</template>

import menuTree from '@/component/menu'
export default{
  components: {
    menuTree
  },
data: {
   list: []  
},
methods: {
      getMenuList({}).then(res => { //我這裡是請求後臺得來得數據，沒有數據直接用我上面得數據，不過得像我下麵這樣處理 
        if (res.status === 200) {
          this.list = res.data.data.menuVoList
        }
      })
}
}

　　這樣，em-menu 組件的無限極迴圈便實現了，註意，我 上面代碼中 el-menu 的屬性可能多了一些，請根據自己需要刪除