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回調函數接收的參數