Informationen zur Methode zum Ändern des Menüs der zweiten Ebene in das Menü der dritten Ebene im Vue iview-admin-Framework

In diesem Artikel wird hauptsächlich die Methode zum Ändern des Menüs der zweiten Ebene in das Menü der dritten Ebene im Vue iview-admin-Framework vorgestellt. Der Inhalt ist jetzt recht gut und dient als Referenz.

Ich habe kürzlich die Vue-Backend-Vorlage von iview-admin verwendet. Nachdem ich sie von Git heruntergeladen hatte, stellte ich fest, dass die linke Navigationsleiste auch das Menü der zweiten Ebene unterstützt wie man das Menü der dritten Ebene implementiert. In tatsächlichen Anwendungsszenarien ist weiterhin ein dreistufiges Menü erforderlich. Es gibt keine andere gute Möglichkeit, als den Code selbst manuell zu ändern.

1. Schritt 1: Schreiben Sie zunächst die Vorlage in VUE neu, ändern Sie die Datei sidebarMenu.vue und erstellen Sie das spezifische Verzeichnis der Datei wie unten gezeigt:

Navigieren im Menü Die Verschachtelungsstruktur der zweiten Ebene der Menükomponente wird in eine Verschachtelung mit drei Ebenen geändert. Dabei wird lediglich festgestellt, ob ein untergeordnetes Attribut vorhanden ist und ob es Unterelemente unter der Routing-Seite der zweiten Ebene enthält. Wenn ja, generiert die V-for-Schleife direkt Unterelement-Tags. Die neue Struktur lautet wie folgt:

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

Fügen Sie unter Methoden in der Komponente eine Methode isThirdLeveMenu hinzu Bestimmen Sie, ob es das Kinderattribut enthält:

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

Schritt 2: Ändern Sie die logische Methode zum Erstellen des aktuellen Pfads: setCurrentPath in der Datei util.js unter libs-Ordner:

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'
   }
  ];
 } 
 //去导航菜单一级页面或者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
   }
  ];
 } 
 //去导航菜单二级页面或三级页面
 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;
};

Schritt 3: Erstellen Sie die dreistufigen Seiten test-child.vue, testcaca.vue und die dreistufige Routing-Containerkomponente artical-publish- Die Struktur von center.vue
artical-publish-center.vue ist wie folgt: Es muss b3494c54b4407fee5bd49358468b38f4 vorhanden sein Pages Vue schrieb beiläufig:

Schritt 4: Gehen Sie hierher, der Container kann das lang erwartete Menü der dritten Ebene realisieren, ^_^ Fügen Sie eine Seitenroute der dritten Ebene hinzu im Router, in router.js unter dem Router-Ordner:

Fügen Sie es zu appRouter hinzu, Sie können es in den Titel einfügen: „Component“ Im untergeordneten Array:

{
    path: 'artical-publish',
    title: '用户配置',
    name: 'artical-publish',
    icon: 'compose',
    component: () => import('@/views/test/artical-publish-center.vue'), //引用三级页面的中间容器层
    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')
     }
    ]
   }

Speichern Sie schließlich, führen Sie Ihr Projekt aus und sehen Sie, wie das Menü der dritten Ebene erscheint:

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es Wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Informationen zur Verwendung der Karusselldiagrammkomponente von vue.js

VUE 3D-Karusselldiagrammpaket Implementierungsmethode

Das obige ist der detaillierte Inhalt vonInformationen zur Methode zum Ändern des Menüs der zweiten Ebene in das Menü der dritten Ebene im Vue iview-admin-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!