###梳理遞歸數據前端
咱們通常拿到後臺的數據是: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
我是08年出道的前端老鳥,有問題或者交流經驗能夠進個人扣扣裙 519293536 我都會盡力幫你們
] 咱們就須要相似於以上的這種數據格式: 扁平化數據轉換遞歸數據,下面貼出個人數據處理方法: 注:應爲在網上看到的許多的遞歸處理方法都不同,有的文章寫於很早不少方法都比較複雜或者代碼比較多餘 複製代碼
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
這裏用到了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) }我是08年出道的前端老鳥,有問題或者交流經驗能夠進個人扣扣裙 519293536 我都會盡力幫你們 } } 複製代碼
###到此就實現了左側菜單的無限級了,應爲如今給公司寫的項目都是權限功能,路由方面呢你們能夠隨便寫,公司項目作了權限:左側菜單,按鈕限制,菜單限制,接口限制目前是四種。element-ui
本文的文字及圖片來源於網絡加上本身的想法,僅供學習、交流使用,不具備任何商業用途,版權歸原做者全部,若有問題請及時聯繫咱們以做處理數組