面料损耗表二级表格合计与表格同时滚动

src/views/reportForms/fabric-loss-table.vue

@@ -335,7 +335,7 @@
         <surplusYarn-modal ref="surplusYarnModal" :father="bb"></surplusYarn-modal>
 
         <!-- 其他入库的纱 -->
-        <otherYarnsIn-modal ref="otherYarnsInModal" :father="hh"></otherYarnsIn-modal>
+        <otherYarnsIn-modal ref="otherYarnsInModal" ></otherYarnsIn-modal>
 
         <!-- 委外订单国内弹框 -->
         <materialsOutQuantity-modal ref="materialsOutQuantityModal" :father="cc"></materialsOutQuantity-modal>
@@ -675,7 +675,7 @@ export default {
           getFabricLossDatas({csocode:value}).then(res => {
             this.loading = false;
             if (res.success) {
-              
+
               // 开票成本成衣：获取原币和本币金额是否完全相同，完全相同隐藏美元列
               var findList = this.fabricLoss.fabricCostClothesList.filter(e=>e.ioriSum!=e.isum);
               if (findList.length == 0)

src/views/reportForms/fabric-loss-table/materialsOutQuantityModal.vue

@@ -61,12 +61,13 @@
       <!-- table -->
       <div>
         <a-table
+          ref="tableRef"
           :loading="loading"
           bordered
           :columns="materialsOutQuantityColumns"
           :data-source="materialsOutQuantityData"
           :pagination="false"
-          :scroll="{ y: 500 }"
+          :scroll="{ y: 500,x:1500 }"
           :footer="showTotal"
         >
         </a-table>
@@ -232,6 +233,22 @@ export default {
     }
   },
   created() {},
+  watch:{
+    materialsOutQuantityData(){
+      this.$nextTick(()=>{  
+         const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+          dom.addEventListener(
+          'scroll',
+          () => {
+            this.$refs.tableInfo.$el.querySelectorAll(
+                '.ant-table-body'
+            )[0].scrollLeft = dom.scrollLeft
+          },
+          true
+      )
+      })
+    }
+  },
   methods: {
     // 第一行 导出
     handleExportXls() {},
@@ -265,12 +282,14 @@ export default {
     showTotal(data) {
       return (
         <a-table
+          ref="tableInfo"
           rowKey={Math.random}
           bordered={false}
           pagination={false}
           columns={this.materialsOutQuantityColumns}
           dataSource={this.totalDataSource || []}
           showHeader={false}
+          scroll={{x:1500 }}
         ></a-table>
       )
     },
@@ -297,7 +316,9 @@ export default {
 /deep/ .ant-table-tbody {
   text-align: center;
 }
-
+ /deep/ .ant-table-footer .ant-table-body {
+    overflow: hidden !important;
+  }
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }

src/views/reportForms/fabric-loss-table/otherYarnsInModal.vue

@@ -50,12 +50,13 @@
       <!-- table -->
       <div>
         <a-table
+          ref="tableRef"
           bordered
           :loading="loading"
           :columns="otherYarnsInColumns"
           :data-source="otherYarnsInData"
           :pagination="false"
-          :scroll="{ y: 500 }"
+          :scroll="{ y: 500,x:1500 }"
           :footer="showTotal"
         >
         </a-table>
@@ -150,6 +151,22 @@ export default {
     }
   },
   created() {},
+  watch:{
+    otherYarnsInData(){
+      this.$nextTick(()=>{  
+         const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+          dom.addEventListener(
+          'scroll',
+          () => {
+            this.$refs.tableInfo.$el.querySelectorAll(
+                '.ant-table-body'
+            )[0].scrollLeft = dom.scrollLeft
+          },
+          true
+      )
+      })
+    }
+  },
   computed: {
     // 合计展示
     totalDataSource(){
@@ -207,12 +224,14 @@ export default {
     showTotal(data) {
       return (
         <a-table
+          ref="tableInfo"
           rowKey={Math.random}
           bordered={false}
           pagination={false}
           columns={this.otherYarnsInColumns}
           dataSource={this.totalDataSource || []}
           showHeader={false}
+          scroll={{x:1500 }}
         ></a-table>
       )
     },
@@ -239,6 +258,10 @@ export default {
   text-align: center;
 }
 
+/deep/ .ant-table-footer .ant-table-body {
+    overflow: hidden !important;
+  }
+
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }

src/views/reportForms/fabric-loss-table/purchaseAmountModal.vue

@@ -44,12 +44,13 @@
       <!-- table -->
       <div>
         <a-table
+           ref="tableRef"
           :loading="loading"
           bordered
           :columns="purchaseAmountColumns"
           :data-source="purchaseAmountData"
           :pagination="false"
-          :scroll="{ y: 500 }"
+          :scroll="{ y: 500,x:1500 }"
           :footer="showTotal"
         >
         </a-table>
@@ -218,6 +219,22 @@ export default {
     }
   },
   created() {},
+   watch:{
+    purchaseAmountData(){
+      this.$nextTick(()=>{  
+         const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+          dom.addEventListener(
+          'scroll',
+          () => {
+            this.$refs.tableInfo.$el.querySelectorAll(
+                '.ant-table-body'
+            )[0].scrollLeft = dom.scrollLeft
+          },
+          true
+      )
+      })
+    }
+  },
   methods: {
     // 第一行 导出
     // handleExportXls() {},
@@ -248,12 +265,14 @@ export default {
     showTotal(data) {
       return (
         <a-table
+        ref="tableInfo"
           rowKey={Math.random}
           bordered={false}
           pagination={false}
           columns={this.purchaseAmountColumns}
           dataSource={this.totalDataSource || []}
           showHeader={false}
+           scroll={{x:1500 }}
         ></a-table>
       )
     },
@@ -280,6 +299,9 @@ export default {
 /deep/ .ant-table-tbody {
   text-align: center;
 }
+ /deep/ .ant-table-footer .ant-table-body {
+    overflow: hidden !important;
+  }
 
 // /deep/ th.replacecolor {
 //   background-color: #ccc;

src/views/reportForms/fabric-loss-table/purchaseInQuantityModal.vue

@@ -53,12 +53,13 @@
       <!-- table -->
       <div>
         <a-table
+          ref="tableRef"
           :loading="loading"
           bordered
           :columns="purchaseInQuantityColumns"
           :data-source="purchaseInQuantityData"
           :pagination="false"
-          :scroll="{ y: 500 }"
+          :scroll="{ y: 500,x:1500 }"
           :footer="showTotal"
         >
         </a-table>
@@ -179,6 +180,22 @@ export default {
     }
   },
   created() {},
+   watch:{
+    purchaseInQuantityData(){
+      this.$nextTick(()=>{  
+         const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+          dom.addEventListener(
+          'scroll',
+          () => {
+            this.$refs.tableInfo.$el.querySelectorAll(
+                '.ant-table-body'
+            )[0].scrollLeft = dom.scrollLeft
+          },
+          true
+      )
+      })
+    }
+  },
   computed: {
     // 合计展示
     totalDataSource(){
@@ -249,12 +266,14 @@ export default {
     showTotal(data) {
       return (
         <a-table
+          ref="tableInfo"
           rowKey={Math.random}
           bordered={false}
           pagination={false}
           columns={this.purchaseInQuantityColumns}
           dataSource={this.totalDataSource || []}
           showHeader={false}
+          scroll={{x:1500 }}
         ></a-table>
       )
     },
@@ -282,6 +301,10 @@ export default {
   text-align: center;
 }
 
+ /deep/ .ant-table-footer .ant-table-body {
+    overflow: hidden !important;
+  }
+
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }

src/views/reportForms/fabric-loss-table/surplusYarnModal.vue

@@ -50,12 +50,13 @@
       <!-- table -->
       <div>
         <a-table
+          ref="tableRef"
           bordered
           :loading="loading"
           :columns="surplusYarnColumns"
           :data-source="surplusYarnData"
           :pagination="false"
-          :scroll="{ y: 500 }"
+          :scroll="{ y: 500,x:1500 }"
           :footer="showTotal"
         >
         </a-table>
@@ -181,6 +182,22 @@ export default {
     }
   },
   created() {},
+  watch:{
+    surplusYarnData(){
+      this.$nextTick(()=>{  
+         const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+          dom.addEventListener(
+          'scroll',
+          () => {
+            this.$refs.tableInfo.$el.querySelectorAll(
+                '.ant-table-body'
+            )[0].scrollLeft = dom.scrollLeft
+          },
+          true
+      )
+      })
+    }
+  },
   methods: {
     // 第一行 导出
     handleExportXls() {},
@@ -210,12 +227,14 @@ export default {
     showTotal(data) {
       return (
         <a-table
+          ref="tableInfo"
           rowKey={Math.random}
           bordered={false}
           pagination={false}
           columns={this.surplusYarnColumns}
           dataSource={this.totalDataSource || []}
           showHeader={false}
+          scroll={{x:1500 }}
         ></a-table>
       )
     },
@@ -242,6 +261,9 @@ export default {
   text-align: center;
 }
 
+ /deep/ .ant-table-footer .ant-table-body {
+    overflow: hidden !important;
+  }
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }