摘要:最近在用的后臺模板,從上下載后發現左側導航欄最多支持到二級菜單也發現很多童鞋在問如何實現三級菜單。在實際的應用場景中還是會出現三級菜單的需求的,木有其他好辦法,只能自己手動改代碼了。
最近在用 iview-admin的Vue后臺模板,從git上下載后發現左側導航欄最多支持到二級菜單,也發現很多童鞋在問如何實現三級菜單。在實際的應用場景中還是會出現三級菜單的需求的,木有其他好辦法,只能自己手動改代碼了。
1. 第一步:首先改寫VUE中的模板,修改sidebarMenu.vue文件,文件具體目錄建下圖:
將Menu導航菜單組件的的二級嵌套結構改為三級嵌套,無非就是判斷二級路由頁面下是否有children屬性及是否含有子元素,有的話直接v-for循環生成子元素標簽,新結構如下:
組件中methods下添加一個方法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; } } },
第二步:修改創建當前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" } ]; } //去導航菜單一級頁面或者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{ 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; };
第三步:建立三級頁面test-child.vue,testcaca.vue和三級路由的容器組件artical-publish-center.vue
artical-publish-center.vue結構如下圖: 要有
其他兩個三級頁面vue隨便寫了:
第四步:到這里,容器可以實現期待已久三級菜單了,^_^. 在router里添加三級頁面路由,router文件夾下router.js中:
加到appRouter中吧,可以放到title: "組件"的children數組中:
{ 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") } ] }
最后保存,運行你的項目,看下三級菜單出來了吧:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95892.html
摘要:使用,框架是二級菜單,因業務需要改成三級菜單。系統配置用戶配置管理員部門信息工單配置出現了,請寫,問題重現了問題也就解決啦。 使用iview-admin,框架是二級菜單,因業務需要改成三級菜單。其他部分都已經改好,但是頁面仍然沒有出來,頁面也沒有了報錯,比較詭異。后來發現問題可能在路由配置,看到了別人寫的這個demo,鏈接:https://jsfiddle.net/767nb8u1/1...
摘要:解決方案方法一適用范圍,菜單列表是通過接口返回的。菜單列表不是接口返回的,接口只返回訪問菜單的權限,大體意思就是統一把路由寫成三級形式。我比較贊成菜單權限列表一律放在后臺做這樣做風險遠比在前端處理的要小。 解決方案 方法一: 適用范圍,菜單列表是通過接口返回的。PS:只要通過接口返回的菜單列表就意味著用戶是可以訪問的,權限處理一律放在后臺做,但寫本地路由時不論是二級界面還是三級界面,配...
摘要:按鈕方面按鈕通過自定義指令綁定其特定的操作接口信息如產品上傳按鈕,需要擁有產品上傳的信息,才可以繼續執行按鈕的業務邏輯。 開篇啰嗦幾句 在傳統單體項目中,通常會有一些框架用來管理熟知的權限。如耳濡目染的 Shiro 或者 Spring Security 。然而,到了現在這個時代,新開始的項目會更多的才用后端微服務 + 前端 mvvm 的架構開始書寫項目。權限控制方面將變得有些許晦澀。當...
閱讀 3621·2021-09-30 09:59
閱讀 2229·2021-09-13 10:34
閱讀 577·2019-08-30 12:58
閱讀 1507·2019-08-29 18:42
閱讀 2198·2019-08-26 13:44
閱讀 2922·2019-08-23 18:12
閱讀 3321·2019-08-23 15:10
閱讀 1625·2019-08-23 14:37