menuTree.vue
1.75 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
<template>
<div>
<template v-for="child in menuData">
<el-submenu
v-if="child.children.length > 0"
:index="child.path"
:key="child.path"
>
<template slot="title">
<i
v-if="child.iconCls"
:class="child.iconCls ? child.iconCls : [fa, fa - file]"
/>
<template v-else-if="child.iconImage">
<el-image
v-show="$route.path == child.path"
:src="child.selectedIconImage"
></el-image>
<el-image
v-show="$route.path != child.path"
:src="child.iconImage"
></el-image>
</template>
<span slot="title">{{ child.name }}</span>
</template>
<menu-tree :menuData="child.children" />
</el-submenu>
<el-menu-item
v-else-if="!child.hidden"
:index="child.path"
:key="child.path"
:class="path.includes(child.path) ? 'is-active' : ''"
>
<i
v-if="child.iconCls"
:class="child.iconCls ? child.iconCls : [fa, fa - file]"
/>
<template v-else-if="child.iconImage">
<el-image
v-show="path.includes(child.path)"
:src="child.selectedIconImage"
></el-image>
<el-image
v-show="!path.includes(child.path)"
:src="child.iconImage"
></el-image>
</template>
<span slot="title">{{ child.name }}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
name: "menuTree",
props: ["menuData", "path"],
watch: {
// 监听浏览器直接输入路由，将此路由添加到tabnavBox
path: function (val) {},
},
};
</script>
<style scoped></style>