mirror of https://github.com/jeecgboot/jeecg-boot
【issues/7773】合计没有跟着左右滚动条滚动
parent
d716111ded
commit
8395d106a2
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue