优化右侧nav显示

src/components/Navside.vue

@@ -2,32 +2,30 @@
     <div>
         <el-row :class="[{'shortnav':isCollapse},{'longNav':!isCollapse}]">
             <el-col :span="24">
-                <el-menu
-                        default-active="2"
-                        class="el-menu-vertical-demo"
-                        @open="handleOpen"
-                        @close="handleClose"
-                        @select="handleSelect"
-                        background-color="#545c64"
-                        text-color="#fff"
-                        active-text-color="#ffd04b"
-                        router
-                        :collapse="isCollapse"
-                >
-                    <el-submenu :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs">
+                <!-- <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
+                    @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
+                    router :collapse="isCollapse" :menu-trigger="click">
+                    <!-- <el-submenu :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs">
                         <template slot="title">
                             <i :class="nav.icon"></i>
-                            <span>{{nav.clmname}}</span>
                         </template>
                         <el-menu-item-group v-for="(child,j) in nav.childs">
                             <el-menu-item :index="child.clmid" :route="child.clmurl">{{child.clmname}}
                             </el-menu-item>
                         </el-menu-item-group>
+                        <!-- <el-menu-item :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs">
+                            <i :class="nav.icon"></i>
+                            <span>{{nav.clmname}}</span>
+                        </el-menu-item> -->
+                <!-- </el-submenu> -->
+                <!-- @click="goPage(nav.clmurl)" -->
+
+                <!-- <el-submenu :index="nav.clmid" v-for="nav in navs" :mode="false" >
+                        <template slot="title">
+                            <i :class="nav.icon" ></i>
+                        </template>
                     </el-submenu>
-                    <!--<el-menu-item  :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs">-->
-                        <!--<i :class="nav.icon"></i>-->
-                        <!--<span>{{nav.clmname}}</span>-->
-                    <!--</el-menu-item>-->
+
                     <el-submenu index="99">
                         <template slot="title">
                             <i class="icon_logout"></i>
@@ -38,6 +36,14 @@
                             </el-menu-item>
                         </el-menu-item-group>
                     </el-submenu>
+                </el-menu> -->
+                <el-menu default-active="/" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
+                    @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
+                    router :collapse="isCollapse"
+                    >
+                    <el-menu-item :index="nav.clmurl"  v-for="nav in navs" >
+                        <i :class="nav.icon"></i>
+                      </el-menu-item>
                 </el-menu>
             </el-col>
         </el-row>
@@ -45,7 +51,7 @@
 </template>
 <script>
     import Navs from '../api/Navs';
-    import {SignOut} from '../api/getApiRes.js'
+    import { SignOut } from '../api/getApiRes.js'
 
     let qs = require('qs');
     export default {
@@ -60,6 +66,9 @@
             this.getTableQuery();
         },
         methods: {
+            goPage(url) {
+                this.$router.push(url);
+            },
             handleSelect(i, s, t) {
                 this.$emit('TabsAdd', i);//触发事件
             },
@@ -93,7 +102,7 @@
                         });
                         localStorage.usercode = '';
                         localStorage.token = '';
-                        that.$router.push({path: '/login', query: {status: 1}});
+                        that.$router.push({ path: '/login', query: { status: 1 } });
                     })
                 }).catch(() => {
                     this.$message({
@@ -128,7 +137,8 @@
         height: 100%;
     }
 
-    .el-col, .el-menu {
+    .el-col,
+    .el-menu {
         height: 100%;
         border-right: 0;
     }
@@ -363,7 +373,7 @@
         background-size: 100%;
     }
 
-    li:hover .icon_logout{
+    li:hover .icon_logout {
         width: 18px;
         height: 18px;
         float: left;
@@ -378,8 +388,12 @@
     }
 
     /deep/ .el-menu-item {
-        height: 30px;
+        height: 60px;
         line-height: 20px;
     }
 
-</style>
+    /deep/ .el-menu--popup {
+        display: none !important;
+        ;
+    }
+</style>

src/views/Index.vue

@@ -51,6 +51,7 @@
                 this.isCollapse = !this.isCollapse;
             },
             handleTabsAdd: function (data) {
+                return false
                 let that = this;
                 let str = ""; //存放第一层遍历的值
                 let strArray = []; //存放第二层遍历的值