diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts index 6e665fde..9a4d96a3 100644 --- a/src/components/Table/src/hooks/useTableScroll.ts +++ b/src/components/Table/src/hooks/useTableScroll.ts @@ -4,7 +4,16 @@ import { getViewportOffset } from '@/utils/domUtils'; import { isBoolean } from '@/utils/is'; import { useWindowSizeFn, onMountedOrActivated } from '@vben/hooks'; import { useModalContext } from '@/components/Modal'; -import { useDebounceFn } from '@vueuse/core'; +import { useDebounceFn, promiseTimeout } from '@vueuse/core'; + +import { + footerHeight as layoutFooterHeight, + layoutMultipleHeadePlaceholderTime, +} from '@/settings/designSetting'; + +import { useRootSetting } from '@/hooks/setting/useRootSetting'; + +const { getShowFooter, getFullContent } = useRootSetting(); export function useTableScroll( propsRef: ComputedRef, @@ -27,7 +36,7 @@ export function useTableScroll( }); watch( - () => [unref(getCanResize), unref(getDataSourceRef)?.length], + () => [unref(getCanResize), unref(getDataSourceRef)?.length, unref(getShowFooter)], () => { debounceRedoHeight(); }, @@ -36,6 +45,18 @@ export function useTableScroll( }, ); + watch( + () => [unref(getFullContent)], + async () => { + // 等待动画结束后200毫秒 + await promiseTimeout(layoutMultipleHeadePlaceholderTime * 1000 + 200); + debounceRedoHeight(); + }, + { + flush: 'post', + }, + ); + function redoHeight() { nextTick(() => { calcTableHeight(); @@ -191,7 +212,10 @@ export function useTableScroll( paddingHeight - paginationHeight - footerHeight - - headerHeight; + headerHeight - + (getShowFooter.value ? layoutFooterHeight : 0) - + // 取高度ceil值 + 1; height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; setHeight(height); diff --git a/src/layouts/default/footer/index.vue b/src/layouts/default/footer/index.vue index f81264b3..689f795d 100644 --- a/src/layouts/default/footer/index.vue +++ b/src/layouts/default/footer/index.vue @@ -53,6 +53,8 @@ @hover-color: rgba(0, 0, 0, 0.85); .@{prefix-cls} { + // 页脚固定高度 + height: 75px; color: @normal-color; text-align: center; diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index 8f02ff85..ede11d44 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -6,6 +6,13 @@ export const multipleTabHeight = 30; export const darkMode = ThemeEnum.LIGHT; +// 页脚固定高度 +export const footerHeight = 75; + +// .@{namespace}-layout-multiple-header__placeholder +// 全屏页头动画时长 +export const layoutMultipleHeadePlaceholderTime = 0.6; + // app theme preset color export const APP_PRESET_COLOR_LIST: string[] = [ '#0960bd',