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

梳理遞歸數(shù)據(jù)

我們一般拿到后臺(tái)的數(shù)據(jù)是：1.扁平化數(shù)據(jù)格式2.遞歸式數(shù)據(jù)格式

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

我們從后臺(tái)拿到的是這種扁平化處理數(shù)據(jù)，那我們實(shí)現(xiàn)遞歸菜單的話需要什么數(shù)據(jù)格式呢，需要格式如下：

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}]

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

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

其中this.tableData就是后臺(tái)給到我的扁平化數(shù)據(jù)，這里將其替換就可以

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

數(shù)據(jù)處理就要開始寫代碼了！

這里用到了vue-ement-ui的左側(cè)菜單

老規(guī)矩，程序員交流用代碼

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> 這里的激活樣式用的是緩存的辦法 // 保存鏈接的激活狀態(tài) saveNavStart(activePath) { window.sessionStorage.setItem('activePath', activePath); this.activePath = activePath; }, created() { this.activePath = window.sessionStorage.getItem('activePath'); }

menuTree.vue組件

實(shí)現(xiàn)左側(cè)無限級菜單最重要的就是 組件自身調(diào)用自身廢話不多說，上代碼:

<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) } }}

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

到此這篇關(guān)于vue Element左側(cè)無限級菜單實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue Element左側(cè)無限級菜單內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！