树滚动效果

src/views/exctab/excelmodel/excelmodel.vue

@@ -1,16 +1,17 @@
 <template>
   <div>
-    <el-row
-      class="box"
-      :gutter="20"
-    >
+    <div class="box flexBetween">
       <!-- 左侧树结构 -->
-      <el-col :span="6">
-        <div class="box">
-          <el-scrollbar>
-            <basic-container>
+      <div :style="{'width':threessW+'px'}">
+        <div
+          class="box flexStar"
+          style="width:100%;"
+        >
+          <el-scrollbar style="width:100%;">
+            <basic-container style="width:100%;">
               <!-- 树结构 -->
               <avue-tree
+                style="width:100%;"
                 :permission="getPermission"
                 :loading="loading"
                 :option="option"
@@ -22,7 +23,7 @@
                   slot-scope="{ data }"
                 >
                   <div>
-                    <span> {{ data.name }} </span>
+                    <span style="text-overflow: ellipsis;width:70%;"> {{ data.name }} </span>
                     <!-- <span> {{ node}} </span> -->
                     <!-- 添加 -->
                     <i
@@ -47,13 +48,14 @@
               </avue-tree>
             </basic-container>
           </el-scrollbar>
+          <div
+            style="border-left:5px solid rgba(255,255,255,0);position:relative;left: -6px;z-index:999"
+            @mousedown="mousedown1()"
+          ></div>
         </div>
-      </el-col>
+      </div>
       <!-- 右侧 -->
-      <el-col
-        :span="18"
-        class="box"
-      >
+      <div class="rightBox box">
         <el-scrollbar>
           <basic-container>
             <!-- 上传、删除、下载操作栏 -->
@@ -129,8 +131,8 @@
             </div>
           </basic-container>
         </el-scrollbar>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
 
     <!-- 弹出框 -->
     <el-dialog
@@ -280,6 +282,19 @@ import { detailExcel, excelType, tabLazytree, getWbsTypeList, wbstree, selectByN
 export default {
   data () {
     return {
+      //#region 鼠标
+      threessW: 400,
+      tharrss: true,
+      mouse1: {
+        x: '',
+        y: '',
+      },//开始
+      mouse2: {
+        x: '',
+        y: '',
+      },//结束
+      //#endregion
+
       loading: false,//懒加载
       option: {
         filter: false,
@@ -711,6 +726,18 @@ export default {
       });
     },
     //#endregion
+
+    //#region 树结构拉事件
+    mousedown1 () {//鼠标按下事件
+      document.onmousemove = (va) => {
+        this.threessW = va.clientX - 240
+      }
+      document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      }
+    },
+    //#endregion
   },
   created () {
     this.excelType()//清表类型
@@ -809,4 +836,8 @@ export default {
     justify-content: center;
   }
 }
+
+.rightBox {
+  flex: 1;
+}
 </style>