sidebar accept Nested Routes
This commit is contained in:
Pan
parent
677ef6dbe3
commit
327ed42e24
8 changed files with 69 additions and 36 deletions
|
|
@ -51,10 +51,11 @@ const ExcelDownload = () => import('../views/excel/index');
|
|||
const Theme = () => import('../views/theme/index');
|
||||
|
||||
/* example*/
|
||||
const DynamicTable = () => import('../views/example/dynamictable');
|
||||
const Table = () => import('../views/example/table');
|
||||
const DragTable = () => import('../views/example/dragTable');
|
||||
const InlineEditTable = () => import('../views/example/inlineEditTable');
|
||||
const TableLayout = () => import('../views/example/table/index');
|
||||
const DynamicTable = () => import('../views/example/table/dynamictable');
|
||||
const Table = () => import('../views/example/table/table');
|
||||
const DragTable = () => import('../views/example/table/dragTable');
|
||||
const InlineEditTable = () => import('../views/example/table/inlineEditTable');
|
||||
const Form1 = () => import('../views/example/form1');
|
||||
|
||||
/* permission */
|
||||
|
|
@ -192,10 +193,17 @@ export const asyncRouterMap = [
|
|||
name: '综合实例',
|
||||
icon: 'zonghe',
|
||||
children: [
|
||||
{ path: 'dynamictable', component: DynamicTable, name: '动态table' },
|
||||
{ path: 'dragtable', component: DragTable, name: '拖拽table' },
|
||||
{ path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
|
||||
{ path: 'table', component: Table, name: '综合table' },
|
||||
{
|
||||
path: '/table',
|
||||
component: TableLayout,
|
||||
name: 'table',
|
||||
children: [
|
||||
{ path: 'dynamictable', component: DynamicTable, name: '动态table' },
|
||||
{ path: 'dragtable', component: DragTable, name: '拖拽table' },
|
||||
{ path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
|
||||
{ path: 'table', component: Table, name: '综合table' }
|
||||
]
|
||||
},
|
||||
{ path: 'form1', component: Form1, name: '综合form1' }
|
||||
]
|
||||
},
|
||||
|
|
|
|||
3
src/views/example/table/index.vue
Normal file
3
src/views/example/table/index.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
|
@ -1,30 +1,14 @@
|
|||
<template>
|
||||
<el-menu :unique-opened='true' mode="vertical" theme="dark" :default-active="$route.path">
|
||||
<template v-for="item in permission_routers" v-if="!item.hidden">
|
||||
<el-submenu :index="item.name" v-if="!item.noDropdown">
|
||||
<template slot="title">
|
||||
<wscn-icon-svg :icon-class="item.icon||'wenzhang1'" /> {{item.name}}
|
||||
</template>
|
||||
<router-link v-for="child in item.children" :key="child.path" v-if="!child.hidden" class="title-link" :to="item.path+'/'+child.path">
|
||||
<el-menu-item :index="item.path+'/'+child.path">
|
||||
{{child.name}}
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
</el-submenu>
|
||||
<router-link v-if="item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
|
||||
<el-menu-item :index="item.path+'/'+item.children[0].path">
|
||||
<wscn-icon-svg :icon-class="item.icon||'geren1'" /> {{item.children[0].name}}
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
</template>
|
||||
<el-menu mode="vertical" theme="dark" :default-active="$route.path">
|
||||
<sidebar-item :routes='permission_routers'></sidebar-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
import SidebarItem from './SidebarItem';
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
components:{SidebarItem},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'permission_routers'
|
||||
|
|
@ -32,16 +16,8 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.el-menu {
|
||||
min-height: 100%;
|
||||
}
|
||||
.wscn-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.hideSidebar .title-link{
|
||||
display: block;
|
||||
text-indent: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
46
src/views/layout/SidebarItem.vue
Normal file
46
src/views/layout/SidebarItem.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div>
|
||||
<template v-for="item in routes">
|
||||
<router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
|
||||
<el-menu-item :index="item.path+'/'+item.children[0].path">
|
||||
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
<el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
|
||||
<template slot="title">
|
||||
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
|
||||
</template>
|
||||
<template v-for="child in item.children" v-if='!child.hidden'>
|
||||
<sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
|
||||
<router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
|
||||
<el-menu-item :index="item.path+'/'+child.path">
|
||||
{{child.name}}
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'SidebarItem',
|
||||
props: {
|
||||
routes: {
|
||||
type: Array
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.wscn-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.hideSidebar .menu-indent{
|
||||
display: block;
|
||||
text-indent: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in a new issue