


About the method of changing the second-level menu to the third-level menu in the Vue iview-admin framework
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="'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"> <!-- 添加条件判断是否还有三级菜单 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> <!-- 以下为新增 添加条件判断如果有三级菜单 则增加三级菜单 --> <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>
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 = ''; 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 === '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 { //如果是三级页面按钮,则在二级按钮数组中找不到这个按钮名称 //需要二级页面下可能出现三级子菜单的情况逻辑加入 let childObj = currentPathObj.children.filter((child) => { return child.name === name; })[0]; // let thirdLevelObj = console.log(childObj) //二级页面 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,再从三级页面中遍历 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: '', //设为空是因为此二级菜单没有实际页面且用于面包屑组件显示,path为空的将不可单击 name: childObj.name }, { title: thirdObj.title, path: currentPathObj.path + '/' + childObj.path + '/' + thirdObj.path, name: thirdObj.name } ]; } } } } vm.$store.commit('setCurrentPath', 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
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: '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') } ] }
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
