Home  >  Article  >  Web Front-end  >  About the method of changing the second-level menu to the third-level menu in the Vue iview-admin framework

About the method of changing the second-level menu to the third-level menu in the Vue iview-admin framework

不言
不言Original
2018-07-03 17:48:333520browse

This article mainly introduces the method of changing the second-level menu to the third-level menu in the Vue iview-admin framework. The content is quite good. I will share it with you now and give it as a reference.

I have recently been using the Vue backend template of iview-admin. After downloading it from git, I found that the left navigation bar supports up to the second-level menu. I also found that many children are asking how to implement the third-level menu. In actual application scenarios, there will still be a need for a three-level menu. There is no other good way but to manually change the code yourself.

1. Step 1: First rewrite the template in VUE, modify the sidebarMenu.vue file, and create the specific directory of the file as shown below:

Navigate Menu The second-level nesting structure of the menu component is changed to a third-level nesting. It is nothing more than determining whether there is a children attribute under the second-level routing page and whether it contains sub-elements. If so, directly v-for loop generates sub-element tags. The new structure is as follows :

<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="&#39;menuitem&#39; + item.name">
    <Icon :type="item.children[0].icon || item.icon" :size="iconSize" :key="&#39;menuicon&#39; + item.name"></Icon>
    <span class="layout-text" :key="&#39;title&#39; + 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">
     <!-- 添加条件判断是否还有三级菜单 v-if="child.children.length<=1" -->
     <MenuItem v-if="isThirdLeveMenu(child)==false" :name="child.name" :key="&#39;menuitem&#39; + child.name">
      <Icon :type="child.icon" :size="iconSize" :key="&#39;icon&#39; + child.name"></Icon>
      <span class="layout-text" :key="&#39;title&#39; + child.name">{{ itemTitle(child) }}</span>
     </MenuItem>
     <!-- 以下为新增 添加条件判断如果有三级菜单 则增加三级菜单 -->
     <Submenu v-if="isThirdLeveMenu(child)==true" :name="child.name" :key="&#39;menuitem&#39; + child.name">
       <template slot="title">
        <Icon :type="child.icon" :size="iconSize" :key="&#39;icon&#39; + child.name"></Icon>
        <span class="layout-text" :key="&#39;title&#39; + child.name">{{ itemTitle(child) }}</span>
       </template>
       <template v-for="son in child.children">
        <MenuItem :name="son.name" :key="&#39;menuitem&#39; + son.name">
         <Icon :type="son.icon" :size="iconSize" :key="&#39;icon&#39; + son.name"></Icon>
         <span class="layout-text" :key="&#39;title&#39; + son.name">{{ itemTitle(son) }}</span>
        </MenuItem>
       </template>
     </Submenu>
     <!-- 以上为新增 -->
    </template>
   </Submenu>
  </template>
 </Menu>
</template>

Add a method isThirdLeveMenu under methods in the component to determine whether it contains the children attribute:

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;
  }
 }
 },

Step 2: Modify the logical method of creating the current path: setCurrentPath, in the util.js file under the libs folder:

util.setCurrentPath = function (vm, name) {
 let title = &#39;&#39;;
 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 === &#39;otherRouter&#39;) {
     isOtherRouter = true;
    }
   }
  } else {
   item.children.forEach(child => {
    if (child.name === name) {
     title = util.handleTitle(vm, child);
     if (item.name === &#39;otherRouter&#39;) {
      isOtherRouter = true;
     }
    }
   });
  }
 });
 let currentPathArr = [];
 //去首页
 if (name === &#39;home_index&#39;) {
  currentPathArr = [
   {
    title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, &#39;home_index&#39;)),
    path: &#39;&#39;,
    name: &#39;home_index&#39;
   }
  ];
 } 
 //去导航菜单一级页面或者OtherRouter路由中的页面
 else if ((name.indexOf(&#39;_index&#39;) >= 0 || isOtherRouter) && name !== &#39;home_index&#39;) {
  currentPathArr = [
   {
    title: util.handleTitle(vm, util.getRouterObjByName(vm.$store.state.app.routers, &#39;home_index&#39;)),
    path: &#39;/home&#39;,
    name: &#39;home_index&#39;
   },
   {
    title: title,
    path: &#39;&#39;,
    name: name
   }
  ];
 } 
 //去导航菜单二级页面或三级页面
 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) {
     //如果是三级页面按钮,则在二级按钮数组中找不到这个按钮名称
     //需要二级页面下可能出现三级子菜单的情况逻辑加入
     if (childArr[i].name === name) {
      hasMenu = true;
      return hasMenu;
     }
     i++;
    }
    //如果一级,二级菜单下都没有此按钮名称,则遍历三级菜单
    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 === &#39;home&#39;) {
   currentPathArr = [
    {
     title: &#39;首页&#39;,
     path: &#39;&#39;,
     name: &#39;home_index&#39;
    }
   ];
  } else if (currentPathObj.children.length <= 1 && currentPathObj.name !== &#39;home&#39;) {
   currentPathArr = [
    {
     title: &#39;首页&#39;,
     path: &#39;/home&#39;,
     name: &#39;home_index&#39;
    },
    {
     title: currentPathObj.title,
     path: &#39;&#39;,
     name: name
    }
   ];
  } else {
    //如果是三级页面按钮,则在二级按钮数组中找不到这个按钮名称
    //需要二级页面下可能出现三级子菜单的情况逻辑加入
   let childObj = currentPathObj.children.filter((child) => {
    return child.name === name;
   })[0];

   // let thirdLevelObj =
   console.log(childObj)
   //二级页面
   if (childObj) {
    currentPathArr = [
     {
      title: &#39;首页&#39;,
      path: &#39;/home&#39;,
      name: &#39;home_index&#39;
     },
     {
      title: currentPathObj.title,
      path: &#39;&#39;,
      name: currentPathObj.name
     },
     {
      title: childObj.title,
      path: currentPathObj.path + &#39;/&#39; + childObj.path,
      name: name
     }
    ];
   }
   //childobj为undefined,再从三级页面中遍历
   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: &#39;首页&#39;,
       path: &#39;/home&#39;,
       name: &#39;home_index&#39;
      },
      {
       title: currentPathObj.title,
       path: &#39;&#39;,
       name: currentPathObj.name
      },
      {
       title: childObj.title,
       path: &#39;&#39;,    //设为空是因为此二级菜单没有实际页面且用于面包屑组件显示,path为空的将不可单击
       name: childObj.name
      },
      {
       title: thirdObj.title,
       path: currentPathObj.path + &#39;/&#39; + childObj.path + &#39;/&#39; + thirdObj.path,
       name: thirdObj.name
      }
     ];
    }
    
   }
   
  }
 }
 
 vm.$store.commit(&#39;setCurrentPath&#39;, currentPathArr);
 return currentPathArr;
};

Step 3: Create three-level pages test-child.vue, testcaca.vue and three-level routing container component artical-publish-center.vue
artical-publish-center.vue structure is as follows: There must be 60d625ebc489f6e4d6c4c1258f0b94ccTag

The other two third-level pages vue wrote casually:

Step 4: Go here , the container can realize the long-awaited third-level menu, ^_^. Add a third-level page routing in the router, in router.js under the router folder:
Add it to appRouter, you can put it in the title: 'component 'In the children array:

{
    path: &#39;artical-publish&#39;,
    title: &#39;用户配置&#39;,
    name: &#39;artical-publish&#39;,
    icon: &#39;compose&#39;,
    component: () => import(&#39;@/views/test/artical-publish-center.vue&#39;), //引用三级页面的中间容器层
    children:[
     {
      path: &#39;testcaca&#39;,
      icon: &#39;ios-pause&#39;,
      name: &#39;testcaca&#39;,
      title: &#39;test4&#39;,
      component: () => import(&#39;@/views/test/testcaca.vue&#39;)
     },
     {
      path: &#39;test-child&#39;,
      icon: &#39;ios-pause&#39;,
      name: &#39;test-child&#39;,
      title: &#39;test-child&#39;,
      component: () => import(&#39;@/views/test/test-child.vue&#39;)
     }
    ]
   }

Finally save, run your project, and see the third-level menu come out:

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About how to use the vue.js carousel chart component

VUE 3D carousel chart package Implementation

The above is the detailed content of About the method of changing the second-level menu to the third-level menu in the Vue iview-admin framework. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn