From 9ddad931ff35150d74a2ecfe47cd13dade73aa09 Mon Sep 17 00:00:00 2001 From: JEECG <445654970@qq.com> Date: Tue, 10 Jun 2025 09:52:27 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90issues/8374=E3=80=91=E5=88=86=E9=A1=B5?= =?UTF-8?q?=E5=A7=8B=E7=BB=88=E6=98=BE=E7=A4=BA=E5=9C=A8=E5=BA=95=E9=83=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Table/src/BasicTable.vue | 2 +- .../Table/src/hooks/useTableScroll.ts | 26 +++++++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/jeecgboot-vue3/src/components/Table/src/BasicTable.vue b/jeecgboot-vue3/src/components/Table/src/BasicTable.vue index d640b42c6..8cacdfbb9 100644 --- a/jeecgboot-vue3/src/components/Table/src/BasicTable.vue +++ b/jeecgboot-vue3/src/components/Table/src/BasicTable.vue @@ -222,7 +222,7 @@ // update-end--author:sunjianlei---date:220230630---for:【QQYUN-5571】自封装选择列,解决数据行选择卡顿问题 ); - const { getScrollRef, redoHeight } = useTableScroll(getProps, tableElRef, getColumnsRef, getRowSelectionRef, getDataSourceRef, slots); + const { getScrollRef, redoHeight } = useTableScroll(getProps, tableElRef, getColumnsRef, getRowSelectionRef, getDataSourceRef, slots, getPaginationInfo); const { customRow } = useCustomRow(getProps, { setSelectedRowKeys, diff --git a/jeecgboot-vue3/src/components/Table/src/hooks/useTableScroll.ts b/jeecgboot-vue3/src/components/Table/src/hooks/useTableScroll.ts index 81ba57e53..0aa3f0ef1 100644 --- a/jeecgboot-vue3/src/components/Table/src/hooks/useTableScroll.ts +++ b/jeecgboot-vue3/src/components/Table/src/hooks/useTableScroll.ts @@ -15,7 +15,8 @@ export function useTableScroll( columnsRef: ComputedRef, rowSelectionRef: ComputedRef | null>, getDataSourceRef: ComputedRef, - slots: Slots + slots: Slots, + getPaginationInfo: ComputedRef ) { const tableHeightRef: Ref> = ref(null); @@ -138,12 +139,33 @@ export function useTableScroll( // 10+6(外层边距padding:10 + 内层padding-bottom:6) height -= 16; // update-end--author:liaozhiyang---date:20240603---for:【TV360X-861】列表查询区域不可往上滚动 - + height = (height < minHeight! ? (minHeight as number) : height) ?? height; height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; setHeight(height); bodyEl!.style.height = `${height}px`; + // update-begin--author:liaozhiyang---date:20240609---for【issues/8374】分页始终显示在底部 + if (maxHeight === undefined) { + if (unref(getPaginationInfo) && unref(getDataSourceRef).length) { + const pageSize = unref(getPaginationInfo)?.pageSize; + const current = unref(getPaginationInfo)?.current; + const total = unref(getPaginationInfo)?.total; + const tableBody = tableEl.querySelector('.ant-table-body') as HTMLElement; + const tr = tableEl.querySelector('.ant-table-tbody')?.children ?? []; + const lastrEl = tr[tr.length - 1] as HTMLElement; + const trHeight = lastrEl.offsetHeight; + const dataHeight = trHeight * pageSize; + if (tableBody && lastrEl) { + if (current === 1 && pageSize > unref(getDataSourceRef).length && total <= pageSize) { + tableBody.style.height = `${height}px`; + } else { + tableBody.style.height = `${dataHeight < height ? dataHeight : height}px`; + } + } + } + } + // update-end--author:liaozhiyang---date:20240609---for【issues/8374】分页始终显示在底部 } useWindowSizeFn(calcTableHeight, 280); onMountedOrActivated(() => {