超級好用的elementui動態迴圈選單
阿新 • • 發佈:2020-09-18
<template> <div> <el-menu @select="selectMenu" :default-active="currentIndexLight" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" :router="startRouter" active-text-color="#ffd04b" > <!-- :default-openeds="arrIndex" --> <div v-for="item in menuList" :key="item.path"> <!-- 沒有子選單 --> <template v-if="item.children && item.children.length == 0"> <el-menu-item :index="item.path"> <i class="el-icon-menu"></i> {{item.title}} </el-menu-item> </template> <!-- 有子選單 --> <el-submenu v-else :index="item.path"> <template slot="title"> <i class="el-icon-menu"></i> {{item.title}} </template> <template v-for="child in item.children"> <!-- 這裡是類似遞迴迴圈 --> <sidebar-item v-if="child.children&&child.children.length>0" :item="child" :key="child.path" /> <el-menu-item v-else :key="child.path" :index="child.path"> <i class="el-icon-location"></i> {{child.title}} </el-menu-item> </template> </el-submenu> </div> </el-menu> </div> </template> <script>
export default { data() { return { startRouter: true,//開啟路由標識, ,啟用該模式會在啟用導航時以 index 作為 path 進行路由跳轉 currentIndexLight: '',//當前啟用選單的 index 高亮顯示 arrIndex: [], menuList: [ { "path": "/awaitdoing", //選單項所對應的路由路徑 "title": "功能1", //選單項名稱 "children": [] //是否有子選單,若沒有,則為[] }, { "path": "/quickset", "title": "功能2", "children": [] }, { "path": "aa", "title": "功能3", "children": [ { "path": "/awaitdo", "title": "功能3-1", "children": [] }, { "path": "/alreadygreen", "title": "功能3-2", "children": [] }, { "path": "/approvedby", "title": "功能3-3", "children": [] }, ] }, { "path": "/func10", "title": "功能10", "children": [] } ] } }, methods: { selectMenu(key, keyPath) { console.log(key, keyPath) this.currentIndexLight = key; }, // 展開指定的 sub-menu handleOpen(key, keyPath) { console.log('展開的時候觸發', key, keyPath); }, // 收起指定的 sub-menu handleClose(key, keyPath) { console.log('收起的時候觸發', key, keyPath); } } } </script>