vue之ele左侧菜单（递归菜单）
Layout.vue
<template>
<el-container style="height: 100%; width: 100%">
<Silder />
<!-- <el-aside width="200px">Aside</el-aside> -->
<el-container>
<el-header>Header</el-header>
<el-main
:style="{
margin: '24px 16px',
padding: '24px',
background: '#fff',
minHeight: '280px'
}"
>Main</el-main
>
</el-container>
</el-container>
</template>
<script>
import Silder from "./childCom/silder/Silder.vue";
export default {
name: "Layout",
components: {
Silder
},
data() {
return {
};
},
methods: {
}
};
</script>
<style lang="scss" scoped></style>
Silder.vue
<template>
<el-aside style="height: 100%; width:200px;" class="aside-wrap">
<el-menu :default-openeds="['1', '3']">
<childMenu :dataList="testData" />
</el-menu>
</el-aside>
</template>
<script>
import childMenu from "./tree/childMenu.vue";
export default {
name: "Silder",
components: {
childMenu
},
data() {
return {
testData: [
{
id: "1",
title: "首页"
},
{
id: "2",
title: "关于",
child: [
{
id: "21",
title: "关于1",
child: [
{
id: "211",
title: "关于11"
},
{
id: "212",
title: "关于12"
}
]
},
{
id: "22",
title: "关于2"
}
]
},
{
id: "3",
title: "用户",
child: [
{
id: "31",
title: "用户1",
child: [
{
id: "311",
title: "用户11"
},
{
id: "312",
title: "用户12"
}
]
},
{
id: "32",
title: "用户2"
}
]
}
]
};
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.aside-wrap {
background-color: #001529;
color: #fff;
}
</style>
childMenu.vue
<template>
<div class="menu-tree">
<label v-for="list in dataList" :key="list.id">
<el-submenu :index="list.id" v-if="list.child">
<template slot="title">
<i class="el-icon-location" v-if="list.level"></i>
<span>{
{
list.title }}</span>
</template>
<label>
<child-menu :dataList="list.child"></child-menu>
</label>
</el-submenu>
<el-menu-item v-else :index="list.index">
<span slot="title">{
{
list.title }}</span>
</el-menu-item>
</label>
</div>
</template>
<script>
export default {
name: "childMenu",
props: ["dataList"]
};
</script>