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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| <template>
| <el-menu :default-active="nowAcTabs" class="pageMenu">
| <template v-for="menu in menus">
| <el-submenu v-if="menu.childrens" :key="menu.name" :index="menu.name">
| <template slot="title">
| <i v-if="menu.icon" :class="menu.icon"></i>
| <span>{{ menu.label }}</span>
| </template>
| <el-menu-item v-for="child in menu.childrens" :key="child.name" :index="child.name"
| @click="select(child)"><i v-if="child.icon" :class="child.icon"></i><span
| class="text">{{ child.label }}</span>
| </el-menu-item>
| </el-submenu>
| <el-submenu v-else :index="menu.name" class="el-submenu" :key="menu.name" @click="select(menu)">
| <template slot="title">
| <i v-if="menu.icon" :class="menu.icon"></i>
| <span>{{ menu.label }}</span>
| </template>
| </el-submenu>
| </template>
| </el-menu>
| </template>
|
| <script>
| let menu_list = [];
| export default {
| data() {
| return {
| acTabs: 'topoGraph',
| menus: [{
| label: "主界面",
| name: "index",
| src: "",
| icon: "el-icon-s-platform",
| childrens: [{
| label: "系统拓扑图",
| icon: "el-icon-s-platform",
| name: "topoGraph",
| src: "topoGraph",
| },
| {
| label: "UPS状态监控",
| icon: "el-icon-s-platform",
| name: "UPSStateMonitor",
| src: "UPSStateMonitor",
| },
| ]
| }, {
| label: "试验管理",
| name: "testMag",
| src: "",
| icon: "el-icon-s-platform",
| childrens: [
| {
| label: "拖动端与加载端转速设置",
| icon: "el-icon-s-platform",
| name: "dAndlSetSpeed",
| src: "dAndlSetSpeed",
| }
| ,{
| label: "test1",
| icon: "test1",
| name: "test1",
| src: "test1",
| }
| ,{
| label: "test2",
| icon: "test2",
| name: "test2",
| src: "test2",
| }
| ]
| }, ]
| }
| },
| methods: {
| select(data) {
| // 当前路由再点击 不处理 不然报错
| if (this.$route.path.indexOf(data.name) > -1) {
| return false;
| }
| if (data.src) {
| localStorage.setItem('activeMenu', data.name)
| this.$router.push({
| path: `/index/${data.src}`,
| }).catch(err => {
|
| });
| }
| },
| },
| computed: {
| nowAcTabs: {
| get () {
| return localStorage.getItem('activeMenu') || this.acTabs;
| }
| ,set (v) {
| this.acTabs = v;
| localStorage.setItem('activeMenu', v);
| }
| }
| },
| mounted () {
| /**
| * 取menu数组 路由变化时确定active用
| */
| this.menus.forEach((v) => {
| if (v.src) {
| menu_list.push(v.src);
| }
| if (v.childrens.length) {
| v.childrens.forEach((val) => {
| if (val.src) {
| menu_list.push(val.src);
| }
| });
| }
| });
|
| // 当路由变化 比如通过地址栏输入 确定当前菜单active
| this.$event.$on('routerChange', (data) => {
| // console.log(data, 'change');
| menu_list.forEach((v) => {
| if (data.indexOf(v) > -1) {
| this.nowAcTabs = v;
| }
| });
| });
| }
| }
| </script>
|
| <style scoped>
| .text {
| display: inline-block;
| width: 100%;
| white-space: normal;
| }
| </style>
|
|
