通讯录侧边新增收起功能

src/HManagement/addressList/addressBook/index.vue

@@ -60,8 +60,15 @@
         </div>
       </template>
       <template #tableLeft style="padding: 0">
-        <div style="margin: 0;padding: 0;min-width: 320px;max-width: 320px;">
-          <myGroup ref="groupRef" @clickGroup="clickGroup" @groupList="groupList" :typeTab="tabName" @delGroup="onReset"></myGroup>
+        <div :style="[{'margin': '0'},{'padding': '0'},{'minWidth': isShow?'320px':'45px'},{'maxWidth':isShow?'320px':'45px'}]">
+          <div style="padding: 0 10px 0 10px">
+            <div style="float: right;">
+              <el-button v-if="isShow" type="text" icon="el-icon-s-unfold"  @click="onCollapse" size="medium" ></el-button>
+              <el-button v-if="!isShow"  type="text" icon="el-icon-s-fold"  @click="onCollapse" size="medium" ></el-button>
+            </div>
+          </div>
+          <myGroup v-if="isShow" ref="groupRef" @clickGroup="clickGroup" @groupList="groupList" :typeTab="tabName" @delGroup="onReset">
+          </myGroup>
         </div>
       </template>
       <template v-slot:tbList="scope">
@@ -176,7 +183,8 @@ export default {
         }
       },
       groupname:'',
-      contactstype:''
+      contactstype:'',
+      isShow:true
     }
   },
   methods:{
@@ -288,6 +296,9 @@ export default {
     onDelSuccess(){
       console.log('抽屉关闭')
       /*this.onReset()*/
+    },
+    onCollapse(){
+      this.isShow = this.isShow?false:true
     }
   },
   mounted() {
@@ -298,5 +309,14 @@ export default {
 </script>
 
 <style scoped>
+/deep/ .el-button--medium {
+  padding:0;
+  font-size: 24px;
+  /* border-radius: 4px; */
+}
+/deep/ .normal-panel[data-v-6c61de12] {
+  width: 250px;
+   border-right: 0px solid #f1f2f3;
+}
 
 </style>