1.主体使用elementUI 的控件

根页面index.vue

父组件 sidebar.vue

子组件 sidebar-item.vue

采用递归的方式遍历层级

我们可以创一个文件夹，里面包含三文件，第一个index.vue

<template>
  <div>
    <sidebar></sidebar>
  </div>
</template>

<script>
import sidebar from "./sidebar"
export default {
  components:{
    sidebar
  }
}
</script>

第二个sidebar.vue，准备源数据

<!-- sidebar.vue文件 -->
<template>
  <div class="index1">
    <!-- 左侧导航菜单 -->
    <el-menu router default-active="1" :unique-opened="true">
      <sidebar-item
        v-for="item in getList"
        :key="item.id"
        :item1="item"
      ></sidebar-item>
    </el-menu>
  </div>
</template>

<script>
import sidebarItem from "./sidebar-item.vue";

export default {
  components: {
    sidebarItem,
  },
  data() {
    return {
      getList: [], //数据源
    };
  },
  created() {
    this.getList = [
      {
        children: [
          {
            href: "暂无",
            id: "2",
            name: "测试2",
            parentId: "1",
            children: [
              {
                href: "暂无",
                id: "3",
                name: "测试3",
                parentId: "2",
                children: [
                  {
                    href: "暂无",
                    id: "4",
                    name: "测试4",
                    parentId: "3",
                    children: [],
                  },
                ],
              },
            ],
          },
        ],
        href: "暂无",
        id: "1",
        name: "测试1",
        parentId: "0",
      },
    ];
    console.log(this.getList);
  },
};
</script>

<style lang="less">
.index1 {
  width: 200px;
  margin: 500px 0;
}
</style>

第三个文件写逻辑 请注意组件在有 name 的情况下可以直接在组件内调用自己，也就是常说的递归组件，这样就实现了无限嵌套

<!-- sidebar-item.vue文件 -->
<template>
  <div>
    <el-submenu v-if="item1.children.length > 0" :index="item1.id">
      <template slot="title">
        <span>{{ item1.name }}</span>
      </template>
      <sidebar-item
        v-for="(child, index) in item1.children"
        :key="index"
        :item1="child"
      >
      </sidebar-item>
    </el-submenu>
    <el-menu-item v-else :key="item1.id" :index="item1.id">
      {{ item1.name }}
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: "sidebarItem",
  props: {
    item1: Object,
  },
};
</script>