forgetest5
/
vue-manage-system1
mirror of https://mirror.trustie.net/testforgeroot/vue-manage-system1.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #34 from hiant/master 

Dynamically create a menu bar based on JSON
This commit is contained in:
LinXin 2017-05-15 10:12:16 +08:00 committed by GitHub
parent 8d7f6dd4e7 f54ef21dc3
commit d25cd3eaff
1 changed files with 84 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/common/Sidebar.vue
View File

@ -1,32 +1,96 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router> <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
<el-menu-item index="readme"> <template v-for="item in items">
<i class="el-icon-setting"></i>自述 <template v-if="item.subs">
</el-menu-item> <el-submenu :index="item.index">
<el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>{{ item.title }}</template>
<template slot="title"><i class="el-icon-menu"></i>表格</template> <el-menu-item v-for="subItem in item.subs" :index="subItem.index">{{ subItem.title }}
<el-menu-item index="basetable">基础表格</el-menu-item> </el-menu-item>
<el-menu-item index="vuetable">Vue表格组件</el-menu-item> </el-submenu>
</el-submenu> </template>
<el-submenu index="3"> <template v-else>
<template slot="title"><i class="el-icon-date"></i>表单</template> <el-menu-item :index="item.index">
<el-menu-item index="baseform">基本表单</el-menu-item> <i class="el-icon-setting"></i>{{ item.title }}
<el-menu-item index="vueeditor">编辑器</el-menu-item> </el-menu-item>
<el-menu-item index="markdown">markdown</el-menu-item> </template>
<el-menu-item index="upload">文件上传</el-menu-item> </template>
</el-submenu>
<el-submenu index="4">
<template slot="title"><i class="el-icon-star-on"></i>图表</template>
<el-menu-item index="basecharts">基础图表</el-menu-item>
<el-menu-item index="mixcharts">混合图表</el-menu-item>
</el-submenu>
</el-menu> </el-menu>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
items: [
{
index: 'readme',
title: '自述'
},
{
index: '2',
title: '表格',
subs: [
{
index: 'basetable',
title: '基础表格'
},
{
index: 'vuetable',
title: 'Vue表格组件'
}
]
},
{
index: '3',
title: '表单',
subs: [
{
index: 'baseform',
title: '基本表单'
},
{
index: 'vueeditor',
title: '编辑器'
},
{
index: 'markdown',
title: 'markdown'
},
{
index: 'upload',
title: '文件上传'
}
]
},
{
index: '4',
title: '图表',
subs: [
{
index: 'basecharts',
title: '基础图表'
},
{
index: 'mixcharts',
title: '混合图表'
}
]
},
{
index: '5',
title: '系统管理',
subs: [
{
index: 'users',
title: '用户管理'
}
]
}
]
}
},
computed:{ computed:{
onRoutes(){ onRoutes(){
return this.$route.path.replace('/',''); return this.$route.path.replace('/','');