1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <!--导航组件-->
| <template>
| <div class="app-sidebar">
| <div class="box">
| <div class="logo-view">
| <el-image :src="require('@/assets/logo.png')"></el-image>
| </div>
| <el-menu
| router
| unique-opened
| :default-active="$route.path"
| class="el-menu-vertical-demo"
| @select="handleOpen"
| @close="handleClose"
| background-color="#314255"
| text-color="#bfcbd9"
| active-text-color="#fff"
| >
| <el-submenu v-for="item in menus" :key="item.id" :index="item.id.toString()">
| <template slot="title">
| <i class="el-icon-money icon"></i>
| <span>{{item.title}}</span>
| </template>
| <el-menu-item v-for="itm in item.children" :key="itm.id" :index="itm.path">{{itm.title}}</el-menu-item>
| </el-submenu>
|
| </el-menu>
| </div>
| </div>
| </template>
|
| <script>
| export default {
| name: "AppSidebar",
| props: {},
| data() {
| return {
| }
| },
| watch: {},
| created() {
| this.initNavMenu()
| this.getMenuTreeByRole()
| },
| methods: {
| getMenuTreeByRole(){
| this.menus=this.$store.state.menus.menus
| },
| // 监听路由
| initNavMenu() {
| // console.log(this.$route.name)
| },
| handleOpen(index) {
| console.log(index)
| },
| handleClose() {}
| }
| }
| </script>
|
| <!-- Add "scoped" attribute to limit CSS to this component only -->
| <style lang="scss" scoped>
| @import "./index.scss";
| </style>
|
|
