Element NavMenu 无限级菜单
- 2020 年 2 月 17 日
- 笔记
数据结构
menudata.json
{"data":[ { "id": 1, "path": "/home", "menuName": "商业数据统计", "component": "Home", "childMenu":[{ "id": 2, "path": "/commercial/dataAccount/Day", "menuName": "日统计1", "component": "DataAccountDay" }, { "id": 3, "path": "/commercial/dataAccount/Month", "menuName": "月统计1", "component": "DataAccountMonth" }] }, { "id": 4, "path": "/home", "menuName": "商业报表中心", "component": "Home", "childMenu":[{ "id": 5, "path": "/commercial/baobiao/Day", "menuName": "日报表1", "component": "BaobiaoDay" }, { "id": 6, "path": "/commercial/baobiao/Month", "menuName": "月报表1", "component": "BaobiaoMonth" }] } ]}
Home.vue
<template> <div> <el-container :style="{height: containerHeight, border: '1px solid #eee'}" id="con"> <el-header style="background:#3c8dbc;"> header </el-header> <el-container> <el-aside width="230px"> <el-menu router :default-active="routePath" unique-opened background-color="#1f3146" text-color="#32acca" active-text-color="#ffd04b" > <NavMenu :navMenus="menuData"></NavMenu> </el-menu> </el-aside> <el-container> <el-main> <router-view></router-view> </el-main> <el-footer> footer </el-footer> </el-container> </el-container> </el-container> </div> </template> <script> import NavMenu from "@/components/NavMenu.vue"; export default { data() { return { containerHeight: "", menuData: [], routePath:"", currentModuleChinese:"", user: window.sessionStorage.getItem("user") }; }, created() { this.$axios.get("/mock/menudata + ".json").then(res => {- this.menuData = res.data.data; }); }, components: { NavMenu }, // watch:{ // $route(){ // console.log(this.$route.path) // this.routePath = this.$route.path // } // }, mounted() { console.log("mounted") this.containerHeight = window.innerHeight + "px"; console.log($) $(window).resize(function() { console.log("hi") $("#con").height($(window).height()-2); }); } }; </script> <style> .el-header { background-color: #377fa9; color: #fff; height: 50px !important; line-height: 50px !important; } .el-header .left img { width: 120px; vertical-align: middle; } .el-header .left span { font-size: 20px; color: #edf8ff; margin-left: 15px; } .el-header .right { float: right; } .el-header .right a { color: #fff; } .el-aside { /* color: #32acca !important; */ background: #1f3146 !important; } .el-menu { border-right: none !important; /* background: #1f3146 !important; */ } .el-footer { background: gray; height: 40px !important; line-height: 40px !important; } .el-footer { border-top: 1px solid #ccc; background: #f8fafd; padding: 10px; margin-left: 0; } .el-footer img { vertical-align: middle; width: 65px; margin-right: 10px; } </style>
NavMenu.vue
<template> <div> <template v-for="(item,index) in navMenus"> <!-- 含有子菜单 --> <el-submenu v-if="item.childMenu && item.childMenu.length>0" :key="index" :index="index+''"> <template slot="title"> <i class="el-icon-setting"></i> <!-- <img :src="item.info.picUrl" alt=""> --> <span>{{item.menuName}}</span> </template> <NavMenu :navMenus="item.childMenu"></NavMenu> </el-submenu> <!-- 最后一级 --> <el-menu-item v-else :key="index" :index="item.path">{{item.menuName}}</el-menu-item> </template> </div> </template>
