调整菜单

src/components/HomeNav/HomeNavLeft.vue

+<style scoped>
+/deep/.el-menu{
+  border-right: none !important
+}
+.iconText{
+  margin-right: 10px;
+}
+</style>
 <style>
   .home-nav {
     width: 100%;
@@ -82,8 +90,8 @@
         <img src="../../assets/img/logo.png" alt />
       </div>
     </div>
-    <div class="home-menu-box">
-      <ul class="home-menu">
+    <div class="home-menu-box" style="overflow-y: scroll;">
+      <!-- <ul class="home-menu">
         <li class="home-menu-item" v-for="(item, index) in navList" :key="index"
           :class="[index === activeIndex ? 'active' : '']" @click="changeMenu(item, index)">
           <div>
@@ -91,7 +99,35 @@
             <span>{{item.MenuName}}</span>
           </div>
         </li>
-      </ul>
+      </ul> -->
+      <el-menu
+        default-active="1"
+        class="el-menu-vertical-demo"
+        background-color="#3d3b4f"
+        text-color="#fff"
+        active-text-color="#409efe" :router="true"
+        :default-active="$route.path">
+        <template v-for="(item,index) in navList">
+          <template v-if="item.list&&item.list.length>0&&item.GCode!='默认'">
+            <el-submenu :index="item.list[0].MenuUrl">
+              <template slot="title">
+                <i class="iconfont iconText"></i>
+                <span>{{ item.GCode }}</span>
+              </template>
+              <el-menu-item-group>
+                <el-menu-item :index="Child.MenuUrl" v-for="(Child,i) in item.list" :route="{path:Child.MenuUrl}"
+                >{{ Child.MenuName }}</el-menu-item>
+              </el-menu-item-group>
+            </el-submenu>
+          </template>
+          <template v-else>
+            <template v-for="(Child,i) in item.list">
+              <el-menu-item :index="Child.MenuUrl" :route="{path:Child.MenuUrl}"
+                >{{ Child.MenuName }}</el-menu-item>
+            </template>
+          </template>
+        </template>
+      </el-menu>
     </div>
 
   </div>
@@ -155,14 +191,33 @@
       let userInfo = this.getLocalStorage();
       this.userInfo = userInfo;
       if (userInfo && userInfo.UserMenu && userInfo.UserMenu.length > 0) {
-        this.navList = userInfo.UserMenu[0].ChildMenu[0].ChildMenu;
+        for(let i=0;i<userInfo.UserMenu.length;i++){
+            for(let j=0;j<userInfo.UserMenu[i].ChildMenu.length;j++){
+              for(let z=0;z<userInfo.UserMenu[i].ChildMenu[j].NewChildMenu.length;z++){
+                for(let y=0;y<userInfo.UserMenu[i].ChildMenu[j].NewChildMenu[z].list.length;y++){
+                  userInfo.UserMenu[i].ChildMenu[j].NewChildMenu[z].list[y].MenuStyle = JSON.parse(userInfo.UserMenu[i].ChildMenu[j].NewChildMenu[z].list[y].MenuStyle)
+                }
+              }
+            }
+          }
+        this.navList = userInfo.UserMenu[0].ChildMenu[0].NewChildMenu;
+       
       }
 
       let $this = this;
       this.MsgBus.$on("setLeftNav", function (val) {
         $this.activeIndex = 0;
         if (userInfo && userInfo.UserMenu && userInfo.UserMenu.length > 0) {
-          $this.navList = userInfo.UserMenu[0].ChildMenu[val].ChildMenu;
+          for(let i=0;i<userInfo.UserMenu.length;i++){
+            for(let j=0;j<userInfo.UserMenu[i].ChildMenu.length;j++){
+              for(let z=0;z<userInfo.UserMenu[i].ChildMenu[j].NewChildMenu.length;z++){
+                for(let y=0;y<userInfo.UserMenu[i].ChildMenu[j].NewChildMenu[z].list.length;y++){
+                  console.log(userInfo.UserMenu[i].ChildMenu[j].NewChildMenu[z].list)
+                }
+              }
+            }
+          }
+          $this.navList = userInfo.UserMenu[0].ChildMenu[val].NewChildMenu;
         }
       });
     },