应用细节
目前企业开发我的项目，比拟罕用的UI框架大抵有三个，elementUI、IView、AntD。当然还有别的UI框架，不过有的可能要免费。其实每个框架在应用的过程中，都会有对应的“坑”，其实所谓的“坑”就是官网文档写的不够具体，导致用户在应用的过程中的细节和官网文档定义的细节不统一。然而官网文档在保护的过程中，又不能用大白话来写，那样就太low了，所以官网文档中的局部组件的应用介绍文案会比拟高大上，导致新应用此UI框架的用户会漏了什么货色。
“踩坑”其实就是总结经验的过程，为了不便大家更好的了解我写的这个案例，就把外围的代码贴出来。话不多少，先看最终成果
最终效果图
讲解：导航栏有三个
1什么是外卖（只有一个一级导航）
2吃外卖的益处、2.1省本人烧饭工夫、2.2省了刷锅工夫、2.3省了跑腿工夫（既有一级导航又有对应二级导航）
3吃外卖的害处、3.1少了烧饭的乐趣、3.2外卖太贵了（也是既有一级导航又有对应二级导航）
步骤一（复制官网代码进行批改）
代码图示
<template> <div class="homeBox"> <div class="left"> <div class="leftNav"> <el-menu :default-active="activeIndex" class="elMenu" background-color="#333" text-color="#B0B0B2" active-text-color="#fff" @open="handleOpen" @close="handleClose" :unique-opened="true" router > <el-menu-item index="eatOut"> <i class="el-icon-eleme"></i> <span slot="title">什么是外卖</span> </el-menu-item> <el-submenu index="2"> <template slot="title"> <i class="el-icon-eleme"></i> <span>吃外卖的益处</span> </template> <el-menu-item index="saveTime">省本人烧饭工夫</el-menu-item> <el-menu-item index="saveWash">省了刷锅工夫</el-menu-item> <el-menu-item index="saveRun">省了跑腿工夫</el-menu-item> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-eleme"></i> <span>吃外卖的害处</span> </template> <el-menu-item index="noFun">少了烧饭的乐趣</el-menu-item> <el-menu-item index="expensive">外卖太贵了</el-menu-item> </el-submenu> </el-menu> </div> </div> <div class="right"> <router-view></router-view> </div> </div></template><script>export default { name: "Home", data() { return { // 这里应用以后路由的name名字会更加好一点，就不会写死了，刷新还在的 activeIndex: this.$route.name, }; }, components: {}, mounted() {}, methods: { handleOpen(key, keyPath) { // console.log("open",key, keyPath); }, handleClose(key, keyPath) { // console.log("close",key, keyPath); }, },};</script>别忘了要定义路由
问题一 el-submenu不加index的报错图
起因是index的属性值是定义组件时必须传入的。同时组件的@select也须要用到这个index
问题二 点击只有一级菜单时不主动合上其余曾经开展的菜单
效果图如下
想要解决这个问题，就要用到组件提供的另外一个事件，@select事件，代码图如下