首先创建一个menus组件:
<template>
<div>
<template v-for="item in childrenList">
<!-- toString() 将number类型转换为string类型 -->
<el-submenu v-if="item.hasOwnProperty('children')&&item.children.length>0" :key="item.id" :index="item.id.toString()">
<template slot="title" style="padding-left:10px">
<i class="el-icon-menu"></i>
<span slot="title">{{ item.title}}</span>
</template>
<!-- 如果有子级数据使用递归组件 -->
<Menu :childrenList="item.children"></Menu>
</el-submenu>
<el-menu-item v-else :index="item.id.toString()" :key="item.id">
<i :class="item.icon"></i>
<span>{{item.title}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
props:['childrenList'],
name:'Menu',
data(){
return{}
},
created(){
console.log(this.childrenList);
}
}
</script>
<style>
</style>
父组件:
<template>
<div>
<div class="tools" @click="toggleClick"><i :class="icon"></i></div>
<el-menu router class="el-menu-vertical-demo" :collapse="isCollapse" background-color="rgb(73, 80, 96)" text-color="rgba(255,255,255,0.7)" unique-opened>
<Menu :childrenList="childrenList"></Menu>
</el-menu>
</div>
</template>
<script>
import Menu from './menus';
export default {
components: {
Menu
},
data(){
return {
isCollapse: false,//菜单展开功能
unCollapse: {
width: '220px'
},
collapse: {
width: '50px'
},
unCollapseMain: {
paddingLeft: '220px'
},
collapseMain: {
paddingLeft: '50px'
},
}
},
computed:{
icon: function () {
return this.isCollapse ? 'el-icon-right' : 'el-icon-back'
}
},
methods:{
toggleClick () {
this.isCollapse = !this.isCollapse
},
}
}
</script>
实现效果:
[原文] (https://juejin.cn/post/6860300596180680712)