中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue中如何實現Element左側無限級菜單

發布時間:2020-07-17 11:17:46 來源:億速云 閱讀:313 作者:小豬 欄目:web開發

小編這次要給大家分享的是vue中如何實現Element左側無限級菜單,文章內容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。

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

我們就需要類似于以上的這種數據格式:
扁平化數據轉換遞歸數據,下面貼出我的數據處理方法:
注:應為在網上看到的許多的遞歸處理方法都不一樣,有的文章寫于很早很多方法都比較復雜或者代碼比較多余

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

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

看完這篇關于vue中如何實現Element左側無限級菜單的文章,如果覺得文章內容寫得不錯的話,可以把它分享出去給更多人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

榆社县| 泰顺县| 夏邑县| 宁阳县| 绥阳县| 合川市| 罗山县| 左权县| 垫江县| 东平县| 望谟县| 东城区| 旬邑县| 寿阳县| 卢氏县| 元江| 沭阳县| 栾城县| 鹤壁市| 图木舒克市| 昔阳县| 涪陵区| 陆河县| 北碚区| 嵩明县| 广州市| 慈利县| 崇阳县| 五大连池市| 郸城县| 菏泽市| 磴口县| 洛浦县| 资中县| 南皮县| 吴江市| 资讯| 寿宁县| 宜黄县| 穆棱市| 当雄县|