<template> <el-menu :default-active="$route.path" :router="true" :unique-opened="true" text-color="#fff" background-color="#333333" active-text-color="#ffd04b" :collapse="menuType" class="el-menu-vertical-demo" > <div class="menu-btn" @click="menuType = !menuType"> <i v-if="!menuType" class="iconfont icon-shouqi"></i> <i v-if="menuType" class="iconfont icon-zhankai"></i> </div> <el-submenu v-for="(data,index) in menuList" :index="data.value" :key="index"> <template slot="title"> <i :class="'iconfont menu-icon '+data.icon"></i> <span>{{data.value}}</span> </template> <el-menu-item v-for="(item,i) in data.list" :index="item.path" :key="i" class="item" >{{item.value}}</el-menu-item> </el-submenu> </el-menu> </template> <script> export default { name: "leftMenu", data() { return { menuList: this.$store.state.menuList, menuType: false }; }, mounted() { // console.log(this.menuList); }, methods: { changeMenuType: function() { this.$store.state.menuType = !this.$store.state.menuType; }, toPath: function(data) { this.$router.push({ name: data.routerName }); if (this.$store.state.openedTab.indexOf(data) < 0) { this.$store.state.openedTab.push(data); } } } }; </script> <style scoped lang="less"> @import "../../util/public"; .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; } .el-menu { background: @bg-b; color: white; overflow: auto; height: 100%; .menu-btn { height: 35px; background: @bg-b-s; line-height: 35px; /*text-align: center;*/ i { font-size: 26px; float: right; padding: 0 15px; } } .el-submenu { .menu-icon { color: white; font-size: 18px; position: relative; right: 5px; } .el-menu-item { background: @main-font-color; } .template { color: black; } } } </style>