threedmenu.vue
2.49 KB
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
<template>
<el-row class="tmenu">
<el-col :span="15" :offset="1">
<el-col :span="3" v-for="(item,index) in three_menu" :key="index">
<!-- <router-link :to="item.path" class="tab-menu"><span @click="savemenu(item.path)" class="tmenu-title">{{item.name}}</span></router-link> -->
<el-menu
:default-active="subactiveIndex"
mode="horizontal"
@select="handleSelect"
:router="true"
>
<el-menu-item :index="item.path" v-if="item.children.length === 0">{{item.name}}</el-menu-item>
<el-submenu :index="item.path" v-if="item.children.length > 0" class="sub-menu">
<template slot="title">{{item.name}}</template>
<el-menu-item v-for="(citem,cindex) in item.children" :key="cindex" :index="citem.path">{{citem.name}}</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-col>
</el-row>
</template>
<script>
import { mapGetters } from "vuex";
import { mapState } from "vuex";
export default {
data() {
return {
subactiveIndex:'',
threemenu:[]
};
},
methods: {
handleSelect(path) {
this.subactiveIndex = path
sessionStorage.setItem("threemenu", this.subactiveIndex);
},
},
computed: {
...mapGetters(["three_menu"])
},
created() {
let threemenu = sessionStorage.getItem("threemenu");
if (threemenu) {
this.subactiveIndex = threemenu;
var _this = this;
setTimeout(function() {
_this.$router.push(threemenu);
}, 0);
}
},
watch: {
three_menu(val) {
if (val.length > 0) {
this.subactiveIndex = val[0].path
if(val[0].children.length > 0){
this.subactiveIndex = val[0].children[0].path
this.$router.push(val[0].children[0].path);
sessionStorage.setItem("threemenu", val[0].children[0].path);
} else{
this.subactiveIndex = val[0].path
this.$router.push(val[0].path);
// sessionStorage.setItem("threemenu", val[0].path);
}
} else {
}
}
},
mounted() {}
};
</script>
<style lang="stylus" scoped>
.tmenu {
height: 40px;
line-height: 40px;
background: #38455e;
text-align: center;
}
.tab-menu {
display: inline-block;
color: #ccc;
font-size: 14px;
line-height: 40px;
text-decoration: none;
}
.router-link-active {
width: 100%;
background: #0c61b2;
color: #fff;
}
.tmenu-title {
display: inline-block;
height: 100%;
width: 100%;
}
</style>