【issues/7773】合计没有跟着左右滚动条滚动

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>

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,
   });