el-menu导航报错Missing required prop: "index"、点击只有一级菜单时不合上其他已展开菜单

使用细节

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

附带打印select回调函数接收的参数