最近項目中,要用到element-ui的無限級分類菜單，根據角色生成不同的遞歸數據，查閱了網上很多資料，發現很多都不太完整并且沒有很多的延伸性。

梳理遞歸數據

我們一般拿到后臺的數據是：1.扁平化數據格式2.遞歸式數據格式

let arr = [{ name:小七, id:1},{ name:小八, id:2},{ name: 小九, id:3}]

我們從后臺拿到的是這種扁平化處理數據，那我們實現遞歸菜單的話需要什么數據格式呢，需要格式如下：

let menuItems = [{ name:小七, id:1, children:[ { name: ’啥也不是’, pid:2 } ]},{ name:小八, id:2, children:[ { name:’隨便寫哦’, pid:3, children:[{ name: ’再次深入’, pid: 4, children:[ { name: ’撒打算’, pid:666 } ]} ] } ]},{ name: 小九, id:3}]

我們就需要類似于以上的這種數據格式：扁平化數據轉換遞歸數據，下面貼出我的數據處理方法：注：應為在網上看到的許多的遞歸處理方法都不一樣，有的文章寫于很早很多方法都比較復雜或者代碼比較多余

computed: { treeData() { let cloneData = JSON.parse(JSON.stringify(this.tableData)); // 對源數據深度克隆 return cloneData.filter(father => { let branchArr = cloneData.filter(child => father.id == child.pid); //返回每一項的子級數組 branchArr.length > 0 ? (father.children = branchArr) : ''; //如果存在子級，則給父級添加一個children屬性，并賦值 return father.pid == 0; //返回第一層 }); } },

其中this.tableData就是后臺給到我的扁平化數據，這里將其替換就可以

當時處理此功能時沒有考慮到子級或者父級有可能值位udfriend 所以沒有做判斷，如果想完善此遞歸數據處理的可以完善一下。

數據處理就要開始寫代碼了！

這里用到了vue-ement-ui的左側菜單

老規矩，程序員交流用代碼

index.vue

<el-menu background-color='#304156' text-color='#fff' active-text-color='#409eff' :collapse='isActive' :collapse-transition='false' :unique-opened='true' :router='true' :default-active='activePath' > <menu-tree :menuData='treeData' @saveNavStart='saveNavStart'></menu-tree> </el-menu> 這里的激活樣式用的是緩存的辦法 // 保存鏈接的激活狀態 saveNavStart(activePath) { window.sessionStorage.setItem('activePath', activePath); this.activePath = activePath; }, created() { this.activePath = window.sessionStorage.getItem('activePath'); }

menuTree.vue組件

實現左側無限級菜單最重要的就是 組件自身調用自身廢話不多說，上代碼:

<template> <div> <label v-for='menu in menuData' :key='menu.id'> <el-submenu :index='String(menu.id)' v-if='menu.children'> <template slot='title'> <i class='el-icon-edit'></i> <span>{{menu.menu_name}}</span> </template> <label> <menutree :menuData='menu.children'></menutree> </label> </el-submenu> <el-menu-item :index='menu.path' @click='saveNavStart(menu.path)' v-else> <i class='el-icon-edit'></i> <span>{{menu.menu_name}}</span> </el-menu-item> </label> </div></template>methods:{ saveNavStart(activePath) { this.$emit(’saveNavStart’,activePath) } }}

到此就實現了左側菜單的無限級了，應為現在給公司寫的項目都是權限功能，路由方面呢大家可以隨便寫，公司項目做了權限：左側菜單，按鈕限制，菜單限制，接口限制目前是四種。本人只是一個小白，分享在項目中遇到的問題，在百度沒有找到好的方法，踩坑分享出來。

到此這篇關于vue Element左側無限級菜單實現的文章就介紹到這了,更多相關vue Element左側無限級菜單內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！