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.最后的效果展示

总结

以上是生活随笔为你收集整理的vue element 实现树形菜单栏n层级分类,NavMenu menu的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。