增加了菜单张开收取的功能 和 菜单内容过程不出现滚动条

src/App.vue

@@ -26,6 +26,5 @@ html {
     height: 100%;
     width: 100%;
     margin: 0 0 0 0;
-    overflow: hidden hidden;
 }
 </style>

src/views/Home/Home.vue

@@ -1,7 +1,14 @@
 <template>
     <div class="home">
         <header class="header">
-            <div class="left">慧牧科技</div>
+            <div class="left">
+                慧牧科技
+                <el-button
+                    @click="onMenuCollapse"
+                    circle
+                    :icon="menuCollapse? 'el-icon-s-unfold' : 'el-icon-s-fold'"
+                ></el-button>
+            </div>
             <div class="right">
                 <a href>15968681777</a>
                 <a href>登录中</a>
@@ -9,8 +16,8 @@
             </div>
         </header>
         <section class="section">
-            <el-row class="tac">
-                <el-col :span="3" class="col">
+            <div class="tac">
+                <div class="col1">
                     <el-menu
                         default-active="2"
                         class="el-menu-vertical-demo"
@@ -28,7 +35,7 @@
                             >
                                 <template slot="title">
                                     <i :class="item.iconClassName"></i>
-                                    <span slot="title">{{ item.oneMenuName }}</span>
+                                    <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
                                 </template>
                                 <el-menu-item
                                     v-for="(item1) in item.childList"
@@ -46,17 +53,17 @@
                                 @click="onClickMenu"
                             >
                                 <i :class="item.iconClassName"></i>
-                                <span slot="title">{{ item.oneMenuName }}</span>
+                                <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
                             </el-menu-item>
                         </div>
                     </el-menu>
-                </el-col>
-                <el-col :span="20" class="main_right">
+                </div>
+                <div class="col2">
                     <div class="warp">
                         <router-view />
                     </div>
-                </el-col>
-            </el-row>
+                </div>
+            </div>
         </section>
     </div>
 </template>
@@ -83,7 +90,13 @@ export default {
     },
     mounted() {},
     methods: {
-        onSignIn() {},
+        // 收取菜单按钮
+        onMenuCollapse() {
+            this.menuCollapse = !this.menuCollapse;
+            this.defaultUnfoldedMenu = [
+                localStorage.getItem("defaultUnfoldedMenu")
+            ];
+        },
         // 菜单展开
         handleOpen(key, keyPath) {
             console.log(key, keyPath);
@@ -109,7 +122,12 @@ export default {
 
 <style lang="scss" scoped>
 .home {
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
     background-color: #eee;
+    display: flex;
+    flex-direction: column;
     .header {
         background-color: #fff;
         height: 40px;
@@ -122,6 +140,9 @@ export default {
         .left {
             font-size: 25px;
             color: #969696;
+            /deep/ .is-circle {
+                margin-left: 40px;
+            }
         }
         .right {
             a {
@@ -130,23 +151,37 @@ export default {
         }
     }
     .section {
+        flex: 1;
+        box-sizing: border-box;
+        overflow: auto;
         .tac {
+            flex: 1;
             display: flex;
-            .col {
-                background-color: #fff;
+            height: 96%;
+            box-sizing: border-box;
+            .col1 {
                 margin-right: 5px;
+                border-radius: 5px;
             }
-        }
-        .main_right {
-            background-color: #fff;
-            border-radius: 5px;
-            .warp {
-                width: 100%;
-                height: 800px;
-                margin: 15px;
+            .col2 {
+                flex: 1;
+                background-color: #fff;
+                padding: 15px;
+                border-radius: 5px;
+                margin-right: 5px;
+                height: 100%;
+                overflow: auto;
+                .warp {
+                    margin: 15px;
+                }
             }
         }
     }
-    // border: 2px solid #f00;
+    // border: 1px solid #f00;
+}
+
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
 }
 </style>

src/views/deviceManagement/DeviceType.vue

@@ -11,6 +11,51 @@
             :filter-node-method="filterNode"
             ref="tree"
         ></el-tree>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>1</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>d</p>
+        <p>22</p>
     </div>
 </template>
 <script>