實現思路主要元件巢狀（元件自己呼叫自己）

　　下面是元件所需要的資料

{
 "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": [],"createTime": 1587605059,"id": "c948265cdf27420eb7b6b502292c5990","name": "系統使用者管理","path": "/user","updateTime": 1587610230
      }
     }
    ],"menu": {
     "createBy": "0-1","createTime": 1587605025,"id": "6d68079a16b94292990f612237bd048e","name": "使用者管理","parentId": "","path": "/#","updateTime": 1587610117
    }
   },{
    "childList": [
     {
      "childList": [],"createTime": 1587469457,"id": "d4b70897052742bb860cf14cea8cf131","name": "新建/修改選單","parentId": "82e5ca1ab2e04d8faffeb973286771ec","path": "/newMenu","updateTime": 1587469457
      }
     }
    ],"createTime": 1587469385,"id": "82e5ca1ab2e04d8faffeb973286771ec","name": "選單管理","path": "","updateTime": 1587469426
    }
   },"createTime": 1587468494,"id": "3a092edd120d40b79322d8486e53e5a1","name": "系統角色管理","parentId": "ce5704f647d341fe8334ad12c6dd4a6b","path": "/setrole","updateTime": 1587469340
      }
     },"createTime": 1587469360,"id": "61d0e4fecbed407d89b1ea5878072374","name": "設定角色許可權","path": "/authorization","updateTime": 1587469360
      }
     },"createTime": 1587469520,"id": "a1a2f6bcbfba4a7f9178ef03ea0fe5b0","name": "許可權管理","path": "/resource","updateTime": 1587624251
      }
     }
    ],"createTime": 1587468417,"id": "ce5704f647d341fe8334ad12c6dd4a6b","name": "角色管理","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 的屬性可能多了一些，請根據自己需要刪除

到此這篇關於element 中 el-menu 元件的無限極迴圈的文章就介紹到這了,更多相關el-menu 元件無限極迴圈內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！