element ui菜单栏动态渲染
直接上代码，模块清晰，自己赋值粘贴都行
<el-menu :default-active="this.$route.path":unique-opened="true"routerclass="el-menu-vertical-demo"background-color="#393e46"text-color="#fff"active-text-color="#4480e9"style="height: 100%;border-right: solid 0px #e6e6e6;width:150px"background-color="#393e46" text-color="#fff" active-text-color="#ffd04b" :collapse="getMenuSwitchState"><!--单级菜单--><el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path"><i :class="'el-icon-' + item.icon"></i><span slot="title">{{item.label}}</span></el-menu-item> <!--多级菜单--><el-submenu :index=index.toString() v-for="(item,index) in hasChildren" :key="index"><template slot="title"><i class="el-icon-menu"></i><span>{{item.label}}</span> </template><el-menu-item-group><el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex">{{subItem.label}}</el-menu-item></el-menu-item-group></el-submenu>
</el-menu>
建议一级菜单的话，后台就不要返回 [] 了，直接去掉，不然 会默认当成二级处理，除非自己把数据处理下，前端处理的话，初始渲染速度可能会受影响。
computed: {noChildren() {return this.asideMenu.filter(item =>!item.children)},hasChildren() {return this.asideMenu.filter(item =>item.children)}
}
asideMenu: [{path: '/', //地址label: '首页', // 菜单标识icon: 's-home', //图标选取的是element图表，然后拼接到上面},{path: "/video",label: '视频管理',icon: 'video-play'},{path: "/user",label: '用户管理',icon: 'user'},//二级菜单{label: '多级菜单',icon: 'user',children: [{path: "/page1",label: '页面1',icon: 'setting'},{path: "/page2",label: '页面1',icon: 'user'},]},
]
created(){
//登录返回
// localStorage.setItem('asideMenu', JSON.stringify(返回的数组)) localStorage默认只能存字符串，所以转下
this.asideMenu = JSON.parse(localStorage.getItem('asideMenu')) //取出赋值给变量
// console.log(JSON.parse(localStorage.getItem('asideMenu')))}
借用某哥们的效果图一用
