使用细节
目前企业开发项目，比较常用的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事件，代码图如下
