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

梳理遞歸數據

我們一般拿到后臺的數據是：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的左側菜單

老規(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組件

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

<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左側無限級菜單內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！