菜单栏问题修复、支持多层

src/components/SubMenu.vue

 <template>
   <div>
-    <template v-for="(item, index) in subMenuList">
+    <template v-for="(item) in subMenuList">
       <el-submenu
         v-if="item.children && item.children.length > 0"
-        :key="item.path + '_' + index"
-				:index="item.path + '_' + index"
+        :key="item.index"
+        :index="item.index"
       >
         <template slot="title">
-          <i class="el-icon-caret-right" v-if="openFlgArr[index]"></i>
-          <i class="el-icon-caret-bottom" v-else></i>
+          <i
+            class="el-icon-caret-bottom"
+            v-if="getOpenFlag(item.index)"
+          ></i>
+          <i class="el-icon-caret-right" v-else></i>
           <!-- <img :src="item.icon" alt=""> -->
           <span>{{ item.name }}</span>
         </template>
-        <SubMenu :subMenuList="item.children" />
+        <SubMenu :subMenuList="item.children" :openFlgArr="openFlgArr" />
       </el-submenu>
       <el-menu-item v-else :key="item.path" :index="item.path">
         <template slot="title">
@@ -28,19 +31,24 @@
 import SubMenu from "./SubMenu.vue";
 
 export default {
-	name: "SubMenu",
+  name: "SubMenu",
   components: { SubMenu },
-  props: ['subMenuList','openFlgArr'],
+  props: ["subMenuList", "openFlgArr"],
+  methods: {
+    getOpenFlag(index) {
+      return this.openFlgArr.includes(index);
+    },
+  },
 };
 </script>
 
 <style>
-.el-menu--collapse>div>.el-menu-item span,
-.el-menu--collapse>div>.el-submenu>.el-submenu__title span {
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    visibility: hidden;
-    display: inline-block;
+.el-menu--collapse > div > .el-menu-item span,
+.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
 }
 </style>

src/views/Layout/SideMenu.vue

@@ -7,15 +7,9 @@
         @click="closeMenu"
       ></c-button>
       <c-button icon="el-icon-s-unfold" v-else @click="openMenu"></c-button>
-      <!-- <c-input prefix-icon="el-icon-search" v-if="menuOpen" v-model="searchContent"
-        @keyup.enter.native="searchMenuEvent" placeholder="全局搜索"></c-input> -->
       <c-search-input v-show="menuOpen"></c-search-input>
     </div>
     <c-content :height="250">
-      <!-- <img
-        src="../../assets/menu_bottom.png"
-        style="position: fixed; width: 200px; bottom: 0"
-      /> -->
       <el-menu
         :default-active="activeMenu"
         class="el-menu-vertical-demo"
@@ -24,10 +18,6 @@
         @close="handleClose"
         :collapse="!menuOpen"
       >
-        <!-- <el-menu-item index="/business/office">
-          <i class="el-icon-menu"></i>
-          <span slot="title">主页</span>
-        </el-menu-item> -->
         <SubMenu :subMenuList="menus" :openFlgArr="openFlgArr"></SubMenu>
       </el-menu>
     </c-content>
@@ -39,18 +29,17 @@ import SubMenu from "~/components/SubMenu.vue";
 
 export default {
   components: { Button, SubMenu },
-  data: function () {
+  data: function() {
     return {
-      recordIndext:'',
       openFlgArr: [],
+      openFlgArrCopy: [],
       menuOpen: true,
-      searchContent: "",
       menuList: [
         // { inifrm: "0", ininam: "公共夹", pntmiu: "" },
         // { inifrm: "sptsel", ininam: "待办任务", pntmiu: "0" },
         // { inifrm: "trnrel", ininam: "复核任务", pntmiu: "0" },
         // { inifrm: "diasel", ininam: "备忘录选择交易", pntmiu: "0" },
-        { inifrm: "1", ininam: "汇款", pntmiu: ""},
+        { inifrm: "1", ininam: "汇款", pntmiu: "" },
         { inifrm: "infcpd", ininam: "汇款查询", pntmiu: "1" },
         { inifrm: "cptopn", ininam: "汇出汇款", pntmiu: "1" },
         { inifrm: "cptadv", ininam: "汇入汇款", pntmiu: "1" },
@@ -83,25 +72,30 @@ export default {
         { inifrm: "infbpd", ininam: "进口单据查询", pntmiu: "4" },
         { inifrm: "inftxm", ininam: "条式语句查询", pntmiu: "4" },
         { inifrm: "5", ininam: "进口代收", pntmiu: "" },
-		    { inifrm: "bctdav", ininam: "进口代收", pntmiu: "5" },
+        { inifrm: "bctdav", ininam: "进口代收", pntmiu: "5" },
         { inifrm: "bctame", ininam: "进口代收修改", pntmiu: "5" },
         { inifrm: "bctacc", ininam: "进口代收承兑", pntmiu: "5" },
         { inifrm: "bctdor", ininam: "进口代收拒付", pntmiu: "5" },
         { inifrm: "bctset", ininam: "进口代收付款", pntmiu: "5" },
-		    { inifrm: "6", ininam: "出口托收", pntmiu: "" },
+        { inifrm: "6", ininam: "出口托收", pntmiu: "" },
         { inifrm: "botdav", ininam: "出口托收寄单", pntmiu: "6" },
         { inifrm: "botame", ininam: "出口托收修改", pntmiu: "6" },
         { inifrm: "botdcr", ininam: "出口托收拒付/不符点", pntmiu: "6" },
         { inifrm: "botset", ininam: "出口托收收汇", pntmiu: "6" },
         { inifrm: "botcan", ininam: "出口托收闭卷", pntmiu: "6" },
-        { inifrm: "7", ininam: "静态参数管理", pntmiu: "", },
+        { inifrm: "7", ininam: "静态参数管理", pntmiu: "" },
         { inifrm: "infusr", ininam: "用户信息", pntmiu: "7" },
-        { inifrm: "8",ininam: "转让证", pntmiu: "" },
+        { inifrm: "8", ininam: "转让证", pntmiu: "" },
         { inifrm: "lttopn", ininam: "转让证开立", pntmiu: "8" },
         { inifrm: "lttame", ininam: "转让证修改", pntmiu: "8" },
         { inifrm: "lttcan", ininam: "转让证注销", pntmiu: "8" },
+        { inifrm: "aaaaaa", ininam: "你你你你", pntmiu: "8" },
+        { inifrm: "bbbbbb", ininam: "我我我我", pntmiu: "aaaaaa" },
+        { inifrm: "cccccc", ininam: "他他他他", pntmiu: "bbbbbb" },
+        { inifrm: "dddddd", ininam: "她她她她", pntmiu: "bbbbbb" },
+        { inifrm: "eeeeee", ininam: "EEEEEEE", pntmiu: "aaaaaa" },
+        { inifrm: "ffffff", ininam: "FFFFFFF", pntmiu: "eeeeee" },
       ],
-      menusOrigin: [],
       menus: [],
     };
   },
@@ -113,69 +107,14 @@ export default {
   mounted() {
     const arr = [];
     this.generateMenuTree(arr);
-    this.menusOrigin = arr;
-    this.menus = this.menusOrigin;
-    this.openFlgArr = new Array(this.menus.length).fill(true)
+    this.menus = arr;
+    this.initOpenFlgIndex();
   },
   methods: {
-    searchMenuEvent() {
-      if (this.searchContent.trim() === "") {
-        this.menus = this.menusOrigin;
-        return;
-      }
-      const res = [];
-      for (let i = 0; i < this.menusOrigin.length; i++) {
-        const menu = this.menusOrigin[i];
-        const r = this.eachItem(menu);
-        if (r !== null) {
-          res.push(r);
-        }
-      }
-      this.menus = res;
-    },
-    eachItem(item) {
-      if (item.name.indexOf(this.searchContent) > -1) {
-        // if (item.children.length > 0) {
-        //   if (this.hasAvailableChild(item.children)) {
-        //     return item;
-        //   }
-        //   return null;
-        // } else {
-        //   // TODO 判断此处是否为叶子节点
-        //   return item;
-        // }
-        return item;
-      }
-      const arr = [];
-      for (let i = 0; i < item.children.length; i++) {
-        const child = item.children[i];
-        const r = this.eachItem(child);
-        if (r !== null) {
-          arr.push(r);
-        }
-      }
-      if (arr.length > 0) {
-        return {
-          name: item.name,
-          path: item.path,
-          icon: item.icon,
-          children: arr,
-        };
-      }
-      return null;
-    },
-    hasAvailableChild(children) {
-      for (let i = 0; i < children.length; i++) {
-        const child = children.length[i];
-        if (child.children.length > 0) {
-          return this.hasAvailableChild(child.children);
-        } else {
-          // TODO 判断此处是否为叶子节点
-          return true;
-        }
-      }
-    },
     generateMenuTree(list, item) {
+      const cc = [],
+        c = [];
+      let n = 0;
       for (let i = 0; i < this.menuList.length; i++) {
         const menuItem = this.menuList[i];
         if (!item) {
@@ -183,55 +122,82 @@ export default {
             const children = [];
             menuItem.path = "/business";
             this.generateMenuTree(children, menuItem);
-            list.push({
+            const child = {
               name: menuItem.ininam,
               path: menuItem.path,
               children,
-            });
-            
+            };
+            if (children.length > 0) {
+              child["index"] = child.path + "_" + n++;
+              cc.push(child);
+            } else {
+              c.push(child);
+            }
           }
         } else {
           if (menuItem.pntmiu === item.inifrm) {
             const children = [];
             menuItem.path = item.path + "/" + menuItem.inifrm;
             this.generateMenuTree(children, menuItem);
-            list.push({
+            const child = {
               name: menuItem.ininam,
               path: menuItem.path,
               icon: "el-icon-document",
               children,
-            });
+            };
+            if (children.length > 0) {
+              child["index"] = child.path + "_" + n++;
+              cc.push(child);
+            } else {
+              c.push(child);
+            }
           }
         }
       }
+      list.push(...cc, ...c);
     },
     handleOpen(index, indexPath) {
       // console.log(index, indexPath);
-      this.$set(this.openFlgArr, index.split("_")[1], false)
-      this.recordIndext=index.split("_")[1]
+      const arr = Object.assign([], this.openFlgArr);
+      arr.push(index);
+      this.openFlgArr = arr;
     },
     handleClose(index, indexPath) {
       // console.log(index, indexPath);
-      this.$set(this.openFlgArr, index.split("_")[1], true)
+      const arr = Object.assign([], this.openFlgArr);
+      this.openFlgArr = arr.filter((idx) => idx !== index);
     },
     openMenu() {
       this.menuOpen = true;
       const aside = document.querySelector("aside");
       aside.className = aside.className.split(" ")[0];
-      // if(){
-      //   this.openFlgArr = new Array(this.menus.length).fill(true);
-      //   this.$set(this.openFlgArr,this.recordIndext , false)
-      // }else{
-      //   this.openFlgArr = new Array(this.menus.length).fill(true);
-      // }
-      
-
+      this.initOpenFlgIndex();
+    },
+    initOpenFlgIndex() {
+      const r = [];
+      this.getOpenMenusIndex(this.menus, r);
+      this.openFlgArr = r;
+    },
+    getOpenMenusIndex(menus, arr) {
+      for (let i = 0; i < menus.length; i++) {
+        const menu = menus[i];
+        if (menu.path === this.activeMenu) {
+          return true;
+        }
+        if (menu.children.length > 0) {
+          if (this.getOpenMenusIndex(menu.children, arr)) {
+            arr.push(menu.index);
+            return true;
+          }
+        }
+      }
+      return false;
     },
     closeMenu() {
       this.menuOpen = false;
       const aside = document.querySelector("aside");
       aside.className = aside.className + " fold";
-      this.openFlgArr = new Array(this.menus.length).fill(true)
+      this.openFlgArr = [];
     },
   },
 };
@@ -324,4 +290,4 @@ export default {
   height: 35px;
   line-height: 35px;
 }
-</style>
+</style>
\ No newline at end of file