pengjunjie/JeecgBoot
1
0
Fork 1
mirror of https://github.com/jeecgboot/JeecgBoot.git synced 2026-01-03 03:45:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
JEECG
2025-02-19 10:23:10 +08:00
parent d716111ded
commit 8395d106a2
2 changed files with 51 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
jeecgboot-vue3/src/components/Table/src/components/TableFooter.vue
View File

@ -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>