乐趣区

关于segmentfault:elmenu导航报错Missing-required-prop-index点击只有一级菜单时不合上其他已展开菜单

jiezi

应用细节

目前企业开发我的项目，比拟罕用的 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 回调函数接管的参数

退出移动版