From 8395d106a2b37e93b94a5d55bf2b5df356d3c0b5 Mon Sep 17 00:00:00 2001
From: JEECG <445654970@qq.com>
Date: Wed, 19 Feb 2025 10:23:10 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90issues/7773=E3=80=91=E5=90=88=E8=AE=A1?=
 =?UTF-8?q?=E6=B2=A1=E6=9C=89=E8=B7=9F=E7=9D=80=E5=B7=A6=E5=8F=B3=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Table/src/components/TableFooter.vue      | 47 +++++++++++++------
 .../src/views/demo/jeecg/TableTotal.vue       | 33 +++++++------
 2 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/jeecgboot-vue3/src/components/Table/src/components/TableFooter.vue b/jeecgboot-vue3/src/components/Table/src/components/TableFooter.vue
index f20b11e4..162e7783 100644
--- a/jeecgboot-vue3/src/components/Table/src/components/TableFooter.vue
+++ b/jeecgboot-vue3/src/components/Table/src/components/TableFooter.vue
@@ -1,19 +1,21 @@
 <template>
-  <Table
-    v-if="summaryFunc || summaryData"
-    :showHeader="false"
-    :bordered="bordered"
-    :pagination="false"
-    :dataSource="getDataSource"
-    :rowKey="(r) => r[rowKey]"
-    :columns="getColumns"
-    tableLayout="fixed"
-    :scroll="scroll"
-  />
+  <div ref="tableFooter">
+    <Table
+      v-if="summaryFunc || summaryData"
+      :showHeader="false"
+      :bordered="bordered"
+      :pagination="false"
+      :dataSource="getDataSource"
+      :rowKey="(r) => r[rowKey]"
+      :columns="getColumns"
+      tableLayout="fixed"
+      :scroll="scroll"
+    />
+  </div>
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
-  import { defineComponent, unref, computed, toRaw } from 'vue';
+  import { defineComponent, unref, computed, toRaw, onMounted, onUnmounted, ref } from 'vue';
   import { Table } from 'ant-design-vue';
   import { cloneDeep } from 'lodash-es';
   import { isFunction } from '/@/utils/is';
@@ -47,7 +49,7 @@
     },
     setup(props) {
       const table = useTableContext();
-
+      const tableFooter = ref<any>(null);
       const getDataSource = computed((): Recordable[] => {
         const { summaryFunc, summaryData } = props;
         if (summaryData?.length) {
@@ -119,7 +121,24 @@
         }
         return columns;
       });
-      return { getColumns, getDataSource };
+      // update-begin--author:liaozhiyang---date:20250218---for：【issues/7773】合计没有跟着左右滚动条滚动
+      let mainTableBody, footerTable;
+      const handleSroll = () => {
+        const scrollLeft = mainTableBody.scrollLeft;
+        footerTable.scrollLeft = scrollLeft;
+      };
+      onMounted(() => {
+        setTimeout(() => {
+          mainTableBody = tableFooter.value?.parentNode?.parentNode?.querySelector('.ant-table-body');
+          footerTable = tableFooter.value?.querySelector('.ant-table-body');
+          mainTableBody?.addEventListener('scroll', handleSroll, false);
+        }, 1e3);
+      });
+      onUnmounted(() => {
+        mainTableBody?.addEventListener('scroll', handleSroll);
+      });
+      // update-end--author:liaozhiyang---date:20250218---for：【issues/7773】合计没有跟着左右滚动条滚动
+      return { getColumns, getDataSource, tableFooter };
     },
   });
 </script>
diff --git a/jeecgboot-vue3/src/views/demo/jeecg/TableTotal.vue b/jeecgboot-vue3/src/views/demo/jeecg/TableTotal.vue
index d95e3124..d3f1dc5b 100644
--- a/jeecgboot-vue3/src/views/demo/jeecg/TableTotal.vue
+++ b/jeecgboot-vue3/src/views/demo/jeecg/TableTotal.vue
@@ -1,27 +1,17 @@
 <template>
   <PageWrapper>
-    <a-card :bordered="false">
-      <BasicTable @register="registerTable" />
-    </a-card>
+    <BasicTable @register="registerTable" :striped="true" />
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
+  import { ref } from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTable, useTable } from '/@/components/Table';
   import { mapTableTotalSummary } from '/@/utils/common/compUtils';
-
-  const [registerTable] = useTable({
-    rowKey: 'id',
-    bordered: true,
-    canResize: false,
-    columns: [
-      { title: '姓名', dataIndex: 'name' },
-      { title: '贡献点', dataIndex: 'point' },
-      { title: '等级', dataIndex: 'level' },
-      { title: '更新时间', dataIndex: 'updateTime' },
-    ],
-    dataSource: [
+  const dataSource = ref<any>([]);
+  setTimeout(() => {
+    dataSource.value = [
       { id: 0, name: '张三', point: 23, level: 3, updateTime: '2019-8-14' },
       { id: 1, name: '小鹿', point: 33, level: 9, updateTime: '2019-8-10' },
       { id: 2, name: '小王', point: 6, level: 1, updateTime: '2019-8-13' },
@@ -35,9 +25,22 @@
       { id: 10, name: '小赵', point: 33, level: 2, updateTime: '2019-8-10' },
       { id: 11, name: '李华', point: 33, level: 8, updateTime: '2019-8-10' },
       { id: 12, name: '小康', point: 33, level: 5, updateTime: '2019-8-10' },
+    ];
+  }, 1e3);
+  const [registerTable] = useTable({
+    rowKey: 'id',
+    bordered: true,
+    canResize: true,
+    columns: [
+      { title: '姓名', width: 500, dataIndex: 'name' },
+      { title: '贡献点', width: 500, dataIndex: 'point' },
+      { title: '等级', width: 500, dataIndex: 'level' },
+      { title: '更新时间', width: 500, dataIndex: 'updateTime' },
     ],
+    dataSource: dataSource,
     // 显示底部合计
     showSummary: true,
+    striped: true,
     // 底部合计计算方法
     summaryFunc: onSummary,
   });