#最近項目中,要用到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

我是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-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 我都會儘力幫大家
    }
}
複製代碼

###到此就實現了左側菜單的無限級了，應為現在給公司寫的項目都是許可權功能，路由方面呢大家可以隨便寫，公司項目做了許可權：左側菜單，按鈕限制，菜單限制，介面限制目前是四種。

本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理