vue+element UI (组件递归) 实现多级导航菜单

首先创建一个menus组件：

<template>
  <div>
    <template v-for="item in childrenList">
      <!-- toString（） 将number类型转换为string类型 -->
      <el-submenu v-if="item.hasOwnProperty('children')&&item.children.length>0" :key="item.id" :index="item.id.toString()">
        <template slot="title" style="padding-left:10px">
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.title}}</span>
        </template>
        <!--  如果有子级数据使用递归组件 -->
        <Menu :childrenList="item.children"></Menu>
      </el-submenu>
      <el-menu-item v-else :index="item.id.toString()" :key="item.id">
        <i :class="item.icon"></i>
        <span>{{item.title}}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  props:['childrenList'],
  name:'Menu',
  data(){
    return{}
  },
  created(){
    console.log(this.childrenList);
  }

}
</script>

<style>

</style>

父组件：

<template>
  <div>
    <div class="tools" @click="toggleClick"><i :class="icon"></i></div>
    <el-menu router class="el-menu-vertical-demo" :collapse="isCollapse" background-color="rgb(73, 80, 96)" text-color="rgba(255,255,255,0.7)" unique-opened>
      <Menu :childrenList="childrenList"></Menu>
    </el-menu>
  </div>
</template>
<script>
import Menu from './menus';
  export default {
    components: {
    Menu
  },
  data(){
    return {
      isCollapse: false,//菜单展开功能
      unCollapse: {
        width: '220px'
      },
      collapse: {
        width: '50px'
      },
      unCollapseMain: {
        paddingLeft: '220px'
      },
      collapseMain: {
        paddingLeft: '50px'
      },
    }
  },
  computed:{
    icon: function () {
      return this.isCollapse ? 'el-icon-right' : 'el-icon-back'
    }
  },
  methods:{
    toggleClick () {
      this.isCollapse = !this.isCollapse
    },
  }

}
</script>

实现效果：
[原文] (https://juejin.cn/post/6860300596180680712)