Implementation idea: nesting of main components (components call themselves)

Here is the data required by the component

{
  "code": 1,
  "data": {
    "menuVoList": [
      {
        "childList": [
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587610158,
              "id": "2f006aed6a114579bd8b9809724428f7",
              "name": "System user rights management",
              "parentId": "6d68079a16b94292990f612237bd048e",
              "path": "/userallotrole",
              "updateBy": "0-1",
              "updateTime": 1587610221
            }
          },
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587605059,
              "id": "c948265cdf27420eb7b6b502292c5990",
              "name": "System user management",
              "parentId": "6d68079a16b94292990f612237bd048e",
              "path": "/user",
              "updateBy": "0-1",
              "updateTime": 1587610230
            }
          }
        ],
        "menu": {
          "createBy": "0-1",
          "createTime": 1587605025,
          "id": "6d68079a16b94292990f612237bd048e",
          "name": "user management ",
          "parentId": "",
          "path": "/#",
          "updateBy": "0-1",
          "updateTime": 1587610117
        }
      },
      {
        "childList": [
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587469457,
              "id": "d4b70897052742bb860cf14cea8cf131",
              "name": "Newly build/Modify menu",
              "parentId": "82e5ca1ab2e04d8faffeb973286771ec",
              "path": "/newMenu",
              "updateBy": "0-1",
              "updateTime": 1587469457
            }
          }
        ],
        "menu": {
          "createBy": "0-1",
          "createTime": 1587469385,
          "id": "82e5ca1ab2e04d8faffeb973286771ec",
          "name": "Menu management",
          "parentId": "",
          "path": "",
          "updateBy": "0-1",
          "updateTime": 1587469426
        }
      },
      {
        "childList": [
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587468494,
              "id": "3a092edd120d40b79322d8486e53e5a1",
              "name": "System role management",
              "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
              "path": "/setrole",
              "updateBy": "0-1",
              "updateTime": 1587469340
            }
          },
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587469360,
              "id": "61d0e4fecbed407d89b1ea5878072374",
              "name": "Set role permissions",
              "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
              "path": "/authorization",
              "updateBy": "0-1",
              "updateTime": 1587469360
            }
          },
          {
            "childList": [],
            "menu": {
              "createBy": "0-1",
              "createTime": 1587469520,
              "id": "a1a2f6bcbfba4a7f9178ef03ea0fe5b0",
              "name": "Rights management",
              "parentId": "ce5704f647d341fe8334ad12c6dd4a6b",
              "path": "/resource",
              "updateBy": "0-1",
              "updateTime": 1587624251
            }
          }
        ],
        "menu": {
          "createBy": "0-1",
          "createTime": 1587468417,
          "id": "ce5704f647d341fe8334ad12c6dd4a6b",
          "name": "Role management",
          "parentId": "",
          "path": "",
          "updateBy": "0-1",
          "updateTime": 1587468417
        }
      }
    ]
  },
  "message": "Success"
}

Now let's set the component (create a menu.vue in the component folder) code as follows

<template>
  <div>
    <template v-for="value in menuData">
      <el-submenu v-if="value.childList.length > '0'" :index="value.menu.name"> //Determine whether the length of the childList array in the data passed in is greater than zero. If it is greater than zero, it means that it is not necessary to cycle 
        <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>

Next, introduce the component just defined where you need to use the menu component

<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 => { //I'm here to request the data from the background. If there is no data, I need to use the data from above directly, but I need to process it as I do below 
        if (res.status === 200) {
          this.list = res.data.data.menuVoList
        }
      })
}
}

In this way, the infinite loop of the EM menu component is implemented. Note that there may be more El menu attributes in my code above. Please delete them according to your own needs