Skip to content

Commit d25cd3e

Browse files
lin-xinlin-xin
authored
Merge pull request lin-xin#34 from hiant/master
Dynamically create a menu bar based on JSON
2 parents 8d7f6dd + f54ef21 commit d25cd3e

File tree

1 file changed

+84
-20
lines changed

1 file changed

+84
-20
lines changed

‎src/components/common/Sidebar.vue

Lines changed: 84 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,96 @@
11
<template>
22
<div class="sidebar">
33
<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
4-
<el-menu-item index="readme">
5-
<i class="el-icon-setting"></i>自述
6-
</el-menu-item>
7-
<el-submenu index="2">
8-
<template slot="title"><i class="el-icon-menu"></i>表格</template>
9-
<el-menu-item index="basetable">基础表格</el-menu-item>
10-
<el-menu-item index="vuetable">Vue表格组件</el-menu-item>
11-
</el-submenu>
12-
<el-submenu index="3">
13-
<template slot="title"><i class="el-icon-date"></i>表单</template>
14-
<el-menu-item index="baseform">基本表单</el-menu-item>
15-
<el-menu-item index="vueeditor">编辑器</el-menu-item>
16-
<el-menu-item index="markdown">markdown</el-menu-item>
17-
<el-menu-item index="upload">文件上传</el-menu-item>
18-
</el-submenu>
19-
<el-submenu index="4">
20-
<template slot="title"><i class="el-icon-star-on"></i>图表</template>
21-
<el-menu-item index="basecharts">基础图表</el-menu-item>
22-
<el-menu-item index="mixcharts">混合图表</el-menu-item>
23-
</el-submenu>
4+
<template v-for="item in items">
5+
<template v-if="item.subs">
6+
<el-submenu :index="item.index">
7+
<template slot="title"><i class="el-icon-menu"></i>{{ item.title }}</template>
8+
<el-menu-item v-for="subItem in item.subs" :index="subItem.index">{{ subItem.title }}
9+
</el-menu-item>
10+
</el-submenu>
11+
</template>
12+
<template v-else>
13+
<el-menu-item :index="item.index">
14+
<i class="el-icon-setting"></i>{{ item.title }}
15+
</el-menu-item>
16+
</template>
17+
</template>
2418
</el-menu>
2519
</div>
2620
</template>
2721

2822
<script>
2923
export default {
24+
data() {
25+
return {
26+
items: [
27+
{
28+
index: 'readme',
29+
title: '自述'
30+
},
31+
{
32+
index: '2',
33+
title: '表格',
34+
subs: [
35+
{
36+
index: 'basetable',
37+
title: '基础表格'
38+
},
39+
{
40+
index: 'vuetable',
41+
title: 'Vue表格组件'
42+
}
43+
]
44+
},
45+
{
46+
index: '3',
47+
title: '表单',
48+
subs: [
49+
{
50+
index: 'baseform',
51+
title: '基本表单'
52+
},
53+
{
54+
index: 'vueeditor',
55+
title: '编辑器'
56+
},
57+
{
58+
index: 'markdown',
59+
title: 'markdown'
60+
},
61+
{
62+
index: 'upload',
63+
title: '文件上传'
64+
}
65+
]
66+
},
67+
{
68+
index: '4',
69+
title: '图表',
70+
subs: [
71+
{
72+
index: 'basecharts',
73+
title: '基础图表'
74+
},
75+
{
76+
index: 'mixcharts',
77+
title: '混合图表'
78+
}
79+
]
80+
},
81+
{
82+
index: '5',
83+
title: '系统管理',
84+
subs: [
85+
{
86+
index: 'users',
87+
title: '用户管理'
88+
}
89+
]
90+
}
91+
]
92+
}
93+
},
3094
computed:{
3195
onRoutes(){
3296
return this.$route.path.replace('/','');

0 commit comments

Comments
 (0)