Vue iview-admin框架二級(jí)菜單改為三級(jí)菜單的方法

2019-11-19 13:33:53

字體：大中小

供稿：網(wǎng)友

最近在用 iview-admin的Vue后臺(tái)模板，從git上下載后發(fā)現(xiàn)左側(cè)導(dǎo)航欄最多支持到二級(jí)菜單,也發(fā)現(xiàn)很多童鞋在問如何實(shí)現(xiàn)三級(jí)菜單。在實(shí)際的應(yīng)用場(chǎng)景中還是會(huì)出現(xiàn)三級(jí)菜單的需求的，木有其他好辦法，只能自己手動(dòng)改代碼了。

1. 第一步：首先改寫VUE中的模板，修改sidebarMenu.vue文件，文件具體目錄建下圖：

將Menu導(dǎo)航菜單組件的的二級(jí)嵌套結(jié)構(gòu)改為三級(jí)嵌套，無非就是判斷二級(jí)路由頁面下是否有children屬性及是否含有子元素，有的話直接v-for循環(huán)生成子元素標(biāo)簽，新結(jié)構(gòu)如下：

<template> <Menu ref="sideMenu" :active-name="$route.name" :open-names="openNames" :theme="menuTheme" width="auto" @on-select="changeMenu">  <template v-for="item in menuList">   <MenuItem v-if="item.children.length<=1" :name="item.children[0].name" :key="'menuitem' + item.name">    <Icon :type="item.children[0].icon || item.icon" :size="iconSize" :key="'menuicon' + item.name"></Icon>    <span class="layout-text" :key="'title' + item.name">{{ itemTitle(item.children[0]) }}</span>   </MenuItem>   <Submenu v-if="item.children.length > 1" :name="item.name" :key="item.name">    <template slot="title">     <Icon :type="item.icon" :size="iconSize"></Icon>     <span class="layout-text">{{ itemTitle(item) }}</span>    </template>    <template v-for="child in item.children">     <!-- 添加條件判斷是否還有三級(jí)菜單 v-if="child.children.length<=1" -->     <MenuItem v-if="isThirdLeveMenu(child)==false" :name="child.name" :key="'menuitem' + child.name">      <Icon :type="child.icon" :size="iconSize" :key="'icon' + child.name"></Icon>      <span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>     </MenuItem>     <!-- 以下為新增 添加條件判斷如果有三級(jí)菜單 則增加三級(jí)菜單 -->     <Submenu v-if="isThirdLeveMenu(child)==true" :name="child.name" :key="'menuitem' + child.name">       <template slot="title">        <Icon :type="child.icon" :size="iconSize" :key="'icon' + child.name"></Icon>        <span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>       </template>       <template v-for="son in child.children">        <MenuItem :name="son.name" :key="'menuitem' + son.name">         <Icon :type="son.icon" :size="iconSize" :key="'icon' + son.name"></Icon>         <span class="layout-text" :key="'title' + son.name">{{ itemTitle(son) }}</span>        </MenuItem>       </template>     </Submenu>     <!-- 以上為新增 -->    </template>   </Submenu>  </template> </Menu></template>

組件中methods下添加一個(gè)方法isThirdLeveMenu,判斷是否含有children屬性:

methods: { changeMenu(active) {  this.$emit("on-change", active); }, itemTitle(item) {  if (typeof item.title === "object") {  return this.$t(item.title.i18n);  } else {  return item.title;  } }, isThirdLeveMenu(child){  if(child.children){   if(child.children.length>0)return true;   else return false;  }  else {   return false;  } } },

第二步：修改創(chuàng)建當(dāng)前path路徑的邏輯方法：setCurrentPath ,在libs文件夾下util.js文件中：

util.setCurrentPath = function (vm, name) { let title = ''; let isOtherRouter = false; vm.$store.state.app.routers.forEach(item => {  if (item.children.length === 1) {   if (item.children[0].name === name) {    title = util.handleTitle(vm, item);    if (item.name === 'otherRouter') {     isOtherRouter = true;    }   }  } else {   item.children.forEach(child => {    if (child.name === name) {     title = util.handleTitle(vm, child);     if (item.name === 'otherRouter') {      isOtherRouter = true;     }    }   });  } }); let currentPathArr = []; //去首頁 if (name === 'home_index') {  currentPathArr = [   {    title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, 'home_index')),    path: '',    name: 'home_index'   }  ]; }  //去導(dǎo)航菜單一級(jí)頁面或者OtherRouter路由中的頁面 else if ((name.indexOf('_index') >= 0 || isOtherRouter) && name !== 'home_index') {  currentPathArr = [   {    title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, 'home_index')),    path: '/home',    name: 'home_index'   },   {    title: title,    path: '',    name: name   }  ]; }  //去導(dǎo)航菜單二級(jí)頁面或三級(jí)頁面 else {  let currentPathObj = vm.$store.state.app.routers.filter(item => {   var hasMenu;   if (item.children.length <= 1) {    hasMenu = item.children[0].name === name;    return hasMenu;   } else {    let i = 0;    let childArr = item.children;    let len = childArr.length;    while (i < len) {     //如果是三級(jí)頁面按鈕，則在二級(jí)按鈕數(shù)組中找不到這個(gè)按鈕名稱     //需要二級(jí)頁面下可能出現(xiàn)三級(jí)子菜單的情況邏輯加入     if (childArr[i].name === name) {      hasMenu = true;      return hasMenu;     }     i++;    }    //如果一級(jí)，二級(jí)菜單下都沒有此按鈕名稱，則遍歷三級(jí)菜單    if(!hasMenu){     for(let m=0;m<childArr.length;m++){      if(!childArr[m].children) continue;      let sonArr = childArr[m].children;      for(let n=0;n<sonArr.length;n++){       if(sonArr[n].name === name){        hasMenu = true;        return hasMenu;       }      }     }    }    return false;   }  })[0];    if (currentPathObj.children.length <= 1 && currentPathObj.name === 'home') {   currentPathArr = [    {     title: '首頁',     path: '',     name: 'home_index'    }   ];  } else if (currentPathObj.children.length <= 1 && currentPathObj.name !== 'home') {   currentPathArr = [    {     title: '首頁',     path: '/home',     name: 'home_index'    },    {     title: currentPathObj.title,     path: '',     name: name    }   ];  } else {    //如果是三級(jí)頁面按鈕，則在二級(jí)按鈕數(shù)組中找不到這個(gè)按鈕名稱    //需要二級(jí)頁面下可能出現(xiàn)三級(jí)子菜單的情況邏輯加入   let childObj = currentPathObj.children.filter((child) => {    return child.name === name;   })[0];   // let thirdLevelObj =   console.log(childObj)   //二級(jí)頁面   if (childObj) {    currentPathArr = [     {      title: '首頁',      path: '/home',      name: 'home_index'     },     {      title: currentPathObj.title,      path: '',      name: currentPathObj.name     },     {      title: childObj.title,      path: currentPathObj.path + '/' + childObj.path,      name: name     }    ];   }   //childobj為undefined，再從三級(jí)頁面中遍歷   else {    let thirdObj;    let childObj = currentPathObj.children.filter((child) => {     let hasChildren;     hasChildren = child.name === name;     if (hasChildren) return hasChildren     if (child.children) {      let sonArr = child.children;      for (let n = 0; n < sonArr.length; n++) {       if (sonArr[n].name === name) {        thirdObj = sonArr[n];        hasChildren = true;        return hasChildren;       }      }     }     return hasChildren    })[0];    if(thirdObj && childObj){     currentPathArr = [      {       title: '首頁',       path: '/home',       name: 'home_index'      },      {       title: currentPathObj.title,       path: '',       name: currentPathObj.name      },      {       title: childObj.title,       path: '',    //設(shè)為空是因?yàn)榇硕?jí)菜單沒有實(shí)際頁面且用于面包屑組件顯示，path為空的將不可單擊       name: childObj.name      },      {       title: thirdObj.title,       path: currentPathObj.path + '/' + childObj.path + '/' + thirdObj.path,       name: thirdObj.name      }     ];    }       }     } }  vm.$store.commit('setCurrentPath', currentPathArr); return currentPathArr;};

第三步：建立三級(jí)頁面test-child.vue,testcaca.vue和三級(jí)路由的容器組件artical-publish-center.vue
artical-publish-center.vue結(jié)構(gòu)如下圖：要有<rout-view>標(biāo)簽

其他兩個(gè)三級(jí)頁面vue隨便寫了：

第四步：到這里，容器可以實(shí)現(xiàn)期待已久三級(jí)菜單了，^_^. 在router里添加三級(jí)頁面路由，router文件夾下router.js中：
加到appRouter中吧,可以放到title: '組件'的children數(shù)組中：

{    path: 'artical-publish',    title: '用戶配置',    name: 'artical-publish',    icon: 'compose',    component: () => import('@/views/test/artical-publish-center.vue'), //引用三級(jí)頁面的中間容器層    children:[     {      path: 'testcaca',      icon: 'ios-pause',      name: 'testcaca',      title: 'test4',      component: () => import('@/views/test/testcaca.vue')     },     {      path: 'test-child',      icon: 'ios-pause',      name: 'test-child',      title: 'test-child',      component: () => import('@/views/test/test-child.vue')     }    ]   }

最后保存，運(yùn)行你的項(xiàng)目，看下三級(jí)菜單出來了吧：