From 35a32950a7e3c6988814baacfedea12c7969cb12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98wangjiuyun?= <‘1595161655@qq.com>
Date: Thu, 7 Nov 2024 14:21:54 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E6=89=A7=E8=A1=8C=E8=A1=A8?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/projectBank/projectProgress.vue | 55 ++++++++++++++---------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/views/projectBank/projectProgress.vue b/src/views/projectBank/projectProgress.vue
index 58fd1ab..ba6fcbd 100644
--- a/src/views/projectBank/projectProgress.vue
+++ b/src/views/projectBank/projectProgress.vue
@@ -36,7 +36,7 @@
           />
         </div>
       </div>
-      <div class="f1">
+      <div class="f1" style="position: relative">
         <CustomTable
           :columns="fixedColumns"
           :tableData="executionData"
@@ -46,10 +46,11 @@
           tableHeight="600"
           :border="true"
         ></CustomTable>
+        <div id="scrollBox">
+          <div id="scrollBoxContent"></div>
+        </div>
       </div>
     </div>
-
-    <!-- 右侧滚动列表格 -->
   </div>
 </template>
 
@@ -90,6 +91,21 @@ export default {
       });
       this.timeRange = [this.dateRange[0], this.dateRange[1]];
       this.executionData = res.data;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let table = document.querySelector(
+            ".el-table__body-wrapper .el-table__body"
+          );
+          let width = table.offsetWidth;
+          let tableBox = document.querySelector(".el-table__body-wrapper");
+          let box = document.getElementById("scrollBoxContent");
+          let scroll = document.getElementById("scrollBox");
+          box.style.width = width + "px";
+          scroll.addEventListener("scroll", (event) => {
+            tableBox.scrollLeft = scroll.scrollLeft;
+          });
+        },500);
+      });
     },
     getFixedColumnsSummaries(param) {
       const { columns, data } = param;
@@ -377,23 +393,18 @@ export default {
   // left: 450px;
   // z-index: 100;
 }
-// ::v-deep .el-table__footer td {
-//   border: none !important;
-// }
-// ::v-deep .el-table__body-wrapper,::v-deep thead.has-gutter{
-//   position: relative;
-//   left: 550px;
-//   .el-table__cell{
-//     width: 100px !important;
-//   }
-//   .is-hidden {
-//     display: none;
-//   }
-// }
-// ::v-deep .el-table__body-wrapper{
-//   max-width: 68% !important;
-// }
-// ::v-deep .el-table--fit{
-//   overflow-x: hidden;
-// }
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+#scrollBox {
+  width: 100%;
+  overflow: auto;
+  position: absolute;
+  bottom: 50px;
+  #scrollBoxContent {
+    height: 20px;
+  }
+}
 </style>