前言：項目有個需求，要實現多層文件夾的下拉。
思路：數據結構為數組多層級嵌套模式，需要利用遞歸渲染菜單欄數據實現菜單多層級分類。

什么是遞歸？

定義：就是函數自己調用自己本身，或者在自己函數調用的下級函數中調用自己。
遞歸函數的使用要注意函數終止條件避免死循環；

遞歸的步驟

假設遞歸函數已經寫好
尋找遞推關系
將遞推關系的結構轉換為遞歸體
將臨界條件加入到遞歸體中

了解什么是遞歸后開始著手敲代碼；
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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。