快捷導(dǎo)航

vue Element左側(cè)無限級菜單實(shí)現(xiàn)

更新時間：2020年06月10日 11:17:37 作者：吊兒郎當(dāng)小元元

這篇文章主要介紹了vue Element左側(cè)無限級菜單實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

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

我們從后臺拿到的是這種扁平化處理數(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) : ""; //如果存在子級，則給父級添加一個children屬性，并賦值
    return father.pid == 0; //返回第一層
   });
  }
 },

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

當(dāng)時處理此功能時沒有考慮到子級或者父級有可能值位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è)菜單，按鈕限制，菜單限制，接口限制目前是四種。
本人只是一個小白，分享在項(xiàng)目中遇到的問題，在百度沒有找到好的方法，踩坑分享出來。

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

您可能感興趣的文章: