项目执行表滚动条调整

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>