vue element 实现树形菜单栏n层级分类,NavMenu menu

前言：项目有个需求，要实现多层文件夹的下拉。
思路：数据结构为数组多层级嵌套模式，需要利用递归渲染菜单栏数据实现菜单多层级分类。

什么是递归？

定义：就是函数自己调用自己本身，或者在自己函数调用的下级函数中调用自己。
递归函数的使用要注意函数终止条件避免死循环；

递归的步骤

假设递归函数已经写好
寻找递推关系
将递推关系的结构转换为递归体
将临界条件加入到递归体中

了解什么是递归后开始着手敲代码；
1.首先 模拟菜单数据，引入封装组件，index.vue

<template>
  <div class="container">
    <el-row class="main-part">
       <el-col :span="5" class="title-col">
         <!-- 实现菜单多级分类 -->
         <el-menu
           @open="handleOpen"
           @close="handleClose"
           default-active="1-1-1-1"
           background-color="#fff"
           text-color="#000"
           active-text-color="#000"
         >
           <!-- 引入组件 -->
           <menu-tree :menuData="menuList"></menu-tree>
         </el-menu>
       </el-col>
    </el-row>
  </div>
</template>
 
<script>
import MenuTree from '../../components/MentTree'
export default {
  components: {
    MenuTree
  },
  data () {
    return {
     menuList: [
        {
          "id": "1363387207968104450",
          "name": "第一层",
          "suffix": null,
          "fileId": null,
          "fileType": "folder",
          "fileTypeDesc": null,
          "isDirectory": "Y",
          "children": [{
            "id": "1363387238204841985",
            "name": "第二层",
            "suffix": null,
            "fileId": null,
            "fileType": "folder",
            "fileTypeDesc": null,
            "isDirectory": "Y",
            "children": [{
              "id": "1363387269502738434",
              "name": "第三层",
              "suffix": null,
              "fileId": null,
              "fileType": "folder",
              "fileTypeDesc": null,
              "isDirectory": "Y",
              "children": [
                {
                  "id": "1363089537374359554",
                  "name": "第四层",
                  "suffix": null,
                  "fileId": null,
                  "fileType": "folder",
                  "fileTypeDesc": null,
                  "isDirectory": "Y",
                  "children": [
                    {
                      "id": "1363094062248235010",
                      "name": "测试重命名12123123",
                      "suffix": "png",
                      "fileId": "1363094050751647746",
                      "path": "http://dwz.date/enkm",
                      "fileType": "png",
                      "fileTypeDesc": "图像",
                      "isDirectory": "N",
                      "parentId": "1363089537374359554"
                    },
                    {
                      "id": "1363094062248235011",
                      "name": "测试重命名12123123",
                      "suffix": "png",
                      "fileId": "1363094050751647746",
                      "path": "http://dwz.date/enkm",
                      "fileType": "png",
                      "fileTypeDesc": "图像",
                      "isDirectory": "N",
                      "parentId": "1363089537374359554"
                    },
                    {
                      "id": "1363094062248235012",
                      "name": "测试重命名12123123",
                      "suffix": "png",
                      "fileId": "1363094050751647746",
                      "path": "http://dwz.date/enkm",
                      "fileType": "png",
                      "fileTypeDesc": "图像",
                      "isDirectory": "N",
                      "parentId": "1363089537374359554"
                    }
                  ],
                  "parentId": null
                },
                {
                  "id": "1363094062248235012",
                  "name": "测试重命名12123123",
                  "suffix": "png",
                  "fileId": "1363094050751647746",
                  "path": "http://dwz.date/enkm",
                  "fileType": "png",
                  "fileTypeDesc": "图像",
                  "isDirectory": "N",
                  "parentId": "1363387269502738434"
                }
              ],
              "parentId": "1363387238204841985"
            },
            {
              "id": "1363387269502738435",
              "name": "第三层2",
              "suffix": null,
              "fileId": null,
              "fileType": "folder",
              "fileTypeDesc": null,
              "isDirectory": "Y",
              "children": [
                {
                  "id": "1363089537374359555",
                  "name": "第四层2",
                  "suffix": null,
                  "fileId": null,
                  "fileType": "folder",
                  "fileTypeDesc": null,
                  "isDirectory": "Y",
                  "children": [
                    {
                      "id": "1363094062248235012",
                      "name": "测试重命名",
                      "suffix": "png",
                      "fileId": "1363094050751647746",
                      "path": "http://dwz.date/enkm",
                      "fileType": "png",
                      "fileTypeDesc": "图像",
                      "isDirectory": "N",
                      "parentId": "1363089537374359555"
                    }
                  ],
                  "parentId": '1363387269502738435'
                }
              ],
              "parentId": "1363387238204841985"
            }],
            "parentId": "1363387207968104450"
          }]
        },
        {
          "id": "1363387207968104451",
          "name": "第一层2",
          "suffix": null,
          "fileId": null,
          "fileType": "folder",
          "fileTypeDesc": null,
          "isDirectory": "Y",
          "children": [
            {
              "id": "1363094062248235011",
              "name": "测试1",
              "suffix": "png",
              "fileId": "1363094050751647746",
              "path": "http://dwz.date/enkm",
              "fileType": "png",
              "fileTypeDesc": "图像",
              "isDirectory": "N",
              "parentId": "1363387207968104451"
            },
            {
              "id": "1363094062248235012",
              "name": "测试2",
              "suffix": "png",
              "fileId": "1363094050751647746",
              "path": "http://dwz.date/enkm",
              "fileType": "png",
              "fileTypeDesc": "图像",
              "isDirectory": "N",
              "parentId": "1363387207968104451"
            },
            {
              "id": "1363094062248235013",
              "name": "测试3",
              "suffix": "png",
              "fileId": "1363094050751647746",
              "path": "http://dwz.date/enkm",
              "fileType": "png",
              "fileTypeDesc": "图像",
              "isDirectory": "N",
              "parentId": "1363387207968104451"
            },
            {
              "id": "1363094062248235014",
              "name": "测试4",
              "suffix": "png",
              "fileId": "1363094050751647746",
              "path": "http://dwz.date/enkm",
              "fileType": "png",
              "fileTypeDesc": "图像",
              "isDirectory": "N",
              "parentId": "1363387207968104451"
            },
            {
              "id": "1363094062248235015",
              "name": "测试5",
              "suffix": "png",
              "fileId": "1363094050751647746",
              "path": "http://dwz.date/enkm",
              "fileType": "png",
              "fileTypeDesc": "图像",
              "isDirectory": "N",
              "parentId": "1363387207968104451"
            }
          ]
        }
      ]
    }
  },
  mounted () {},
  methods: {}
}
</script>

2.MenuTree组件内部实现菜单栏递归渲染

<template>
  <div>
    <template v-for="menu in this.menuData">
      <el-submenu :key="menu.id" :index="menu.id" v-if="menu.children">
          <template slot="title">
              <i :class="menu.icon"></i>
              <span slot="title">{{menu.name}}</span>
          </template>
          <menu-tree :menuData="menu.children"></menu-tree>
      </el-submenu>
      <el-menu-item :key="menu.id" :index="menu.id" v-else>
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.name}}</span>
      </el-menu-item>
    </template>
  </div>
</template>
 
<script>
export default {
  props: ['menuData'],
  name: 'MenuTree'
}
</script>
<style>
    .el-menu-item{
        overflow:hidden
    }
</style>

3.最后的效果展示