<el-menu
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="1-1">
<template slot="title" >
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
修复css 样式:
一般修复框架样式,直接可以用 !important
我原来写的话, 直接将方法放到了生命周期中,这样不好,我们应该将方法放到 methods 中才行!
这样的话我们的async await 就不需要写在created
王荣荣,如此可爱!
这就是套路,以后我们生命周期中,尽量不要写大段代码,都放到methods 中就行了! 这就是约定,行,我们得到了数据,我给大家截图下:
有了数据了,利用vue 数据绑定功能,绑定上去!
<el-menu
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-submenu :index="'/' + item.path" v-for="(item) in menuList" :key = "item.id">
<template slot="title">
<i class="el-icon-location"></i>
<span>{
{item.authName}}</span>
</template>
<el-menu-item :index="'/' + item.path" v-for="(item) in item.children" :key = "item.id" >
<template slot="title" >
<i class="el-icon-location"></i>
<span>{
{item.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
我觉得不需要修复菜单Padding 我又去掉了,原来挺好友层次感觉!
行,这节,我们完成了左侧菜单的展示,下节就是修复一些菜单的问题!