先来看看问题1:(实现el-menu占满整个页面)
这是el-menu没有设置高度出现的问题
这是将el-menu这块高度设置为100vh,出现的问题
最后,解决问题 ,如图
在App.vue中,添加以下代码
html,body {
margin: 0;
height: 100%;
}
在布局文件中,也就是在以下文件中,给container类添加戴拿
.container{
height: 100%
}
最后,也就是在el-main里面,即TabInner里面添加以下代码
.el-menu{
height:100%
}
问题2:实现多级菜单
做法:遍历从父组件传过来的menuData数组数据(菜单栏数据),如果数据里有children属性,则建立一个父级菜单名,并再次循环去判断children属性里的数据,若没有children属性,则当做普通以及菜单处理,若还有children则会继续创建父级菜单名。
完整代码:
在Menu.vue页面
<template>
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#1F2D3D"
text-color="#ffffff"
router
>
<menu-tree :menuData="MenuList"></menu-tree>
</el-menu>
</template>
<script>
import MenuTree from './MenuTree.vue'
export default {
components: {
MenuTree
},
data(){
return {
MenuList: [
{index: '/page1',content: '商户信息',},
{index: '/page2',content: '门店信息',},
{index: '/page3',content: '终端信息',},
// {index: '/page4',content: '接口配置',},
{index: '/page5',content: '门店接口配置',},
// {index: '/page6',content: '支付渠道',},
{index: '/page7',content: '签到日志',},
{index: '/page4',content: '系统参数',children:[
{index: '/page4',content: '接口配置'},
{index: '/page6',content: '支付渠道',}
]},
]
}
}
}
</script>
MenuTree组件页面:
<template>
<div>
<template v-for="menu in this.menuData">
<el-submenu :key="menu.index" :index="menu.index" v-if="menu.children">
<template slot="title">
<i :class="menu.icon"></i>
<span slot="title">{{menu.content}}</span>
</template>
<menu-tree :menuData="menu.children"></menu-tree>
</el-submenu>
<el-menu-item :key="menu.index" :index="menu.index" v-else>
<i :class="menu.icon"></i>
<span slot="title">{{menu.content}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
props: ['menuData'],
name: 'MenuTree'
}
</script>