diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index d2adb177ad0ddad3bd4085e48946b54d98b2238b..e57ffdff12ad5e3bdd7fc082d0a4c875ecdc039e 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -13,6 +13,7 @@ - 确保 `table action` 的值被正确更新 - 修复页面切换的动画无法关闭 - 修复`PageWrapper`title 不显示 +- 修复表格数据为空时高度计算错误 ## 2.0.3 (2021-03-07) diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue index e989e9d2084acf2762d8f7011997eccc2b4b153e..4db8ec23e5a4ef4519340bb117cd8a4de1efb86f 100644 --- a/src/components/Page/src/PageWrapper.vue +++ b/src/components/Page/src/PageWrapper.vue @@ -66,7 +66,7 @@ const headerRef = ref(null); const footerRef = ref(null); const footerHeight = ref(0); - const { prefixCls } = useDesign('page-wrapper'); + const { prefixCls, prefixVar } = useDesign('page-wrapper'); const { contentHeight, setPageHeight, pageHeight } = usePageContext(); const getClass = computed(() => { @@ -110,40 +110,39 @@ } nextTick(() => { //fix:in contentHeight mode: delay getting footer and header dom element to get the correct height - setTimeout(() => { - const footer = unref(footerRef); - const header = unref(headerRef); - footerHeight.value = 0; - const footerEl = footer?.$el; + const footer = unref(footerRef); + const header = unref(headerRef); + footerHeight.value = 0; + const footerEl = footer?.$el; - if (footerEl) { - footerHeight.value += footerEl?.offsetHeight ?? 0; - } - let headerHeight = 0; - const headerEl = header?.$el; - if (headerEl) { - headerHeight += headerEl?.offsetHeight ?? 0; - } - //fix:subtract content's marginTop and marginBottom value - let subtractHeight = 0; - const attributes = getComputedStyle( - document.querySelectorAll('.vben-page-wrapper-content')[0] - ); - if (attributes.marginBottom) { - const contentMarginBottom = Number(attributes.marginBottom.replace(/[^\d]/g, '')); - subtractHeight += contentMarginBottom; - } - if (attributes.marginTop) { - const contentMarginTop = Number(attributes.marginTop.replace(/[^\d]/g, '')); - subtractHeight += contentMarginTop; - } - setPageHeight?.( - unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight - ); - }, 400); + if (footerEl) { + footerHeight.value += footerEl?.offsetHeight ?? 0; + } + let headerHeight = 0; + const headerEl = header?.$el; + if (headerEl) { + headerHeight += headerEl?.offsetHeight ?? 0; + } + // fix:subtract content's marginTop and marginBottom value + let subtractHeight = 0; + const { marginBottom, marginTop } = getComputedStyle( + document.querySelectorAll(`.${prefixVar}-page-wrapper-content`)?.[0] + ); + if (marginBottom) { + const contentMarginBottom = Number(marginBottom.replace(/[^\d]/g, '')); + subtractHeight += contentMarginBottom; + } + if (marginTop) { + const contentMarginTop = Number(marginTop.replace(/[^\d]/g, '')); + subtractHeight += contentMarginTop; + } + setPageHeight?.( + unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight + ); }); }, { + flush: 'post', immediate: true, } ); @@ -171,6 +170,7 @@ .@{prefix-cls}-content { margin: 16px 16px 0 16px; } + .ant-page-header { &:empty { padding: 0; diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index a297ac4f6ba6cb76e46f9d701726f3db01ae97cf..0cc7bb509b23f569561f6f0c5214ad684b550e94 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -161,7 +161,8 @@ getProps, tableElRef, getColumnsRef, - getRowSelectionRef + getRowSelectionRef, + getDataSourceRef ); const { customRow } = useCustomRow(getProps, { diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts index a1912d1344237ba3bc62e27b76a449d6bfa0a4f0..2396d631ddfab32c30441d127cc527e710b4622a 100644 --- a/src/components/Table/src/hooks/useTableScroll.ts +++ b/src/components/Table/src/hooks/useTableScroll.ts @@ -14,14 +14,15 @@ export function useTableScroll( propsRef: ComputedRef, tableElRef: Ref, columnsRef: ComputedRef, - rowSelectionRef: ComputedRef | null> + rowSelectionRef: ComputedRef | null>, + getDataSourceRef: ComputedRef ) { const tableHeightRef: Ref> = ref(null); const modalFn = useModalContext(); - // const [debounceCalcTableHeight] = useDebounce(calcTableHeight, 80); - const [debounceRedoHeight] = useDebounce(redoHeight, 250); + //320 Greater than animation time 280 + const [debounceRedoHeight] = useDebounce(redoHeight, 300); const getCanResize = computed(() => { const { canResize, scroll } = unref(propsRef); @@ -34,6 +35,7 @@ export function useTableScroll( debounceRedoHeight(); }, { + flush: 'post', immediate: true, } ); @@ -59,77 +61,77 @@ export function useTableScroll( async function calcTableHeight() { const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef); - if (!unref(getCanResize)) return; + const tableData = unref(getDataSourceRef); + + if (!unref(getCanResize) || tableData.length === 0) return; await nextTick(); //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight - setTimeout(() => { - const table = unref(tableElRef); - if (!table) return; - - const tableEl: Element = table.$el; - if (!tableEl) return; - - const headEl = tableEl.querySelector('.ant-table-thead '); - - if (!headEl) return; - - // Table height from bottom - const { bottomIncludeBody } = getViewportOffset(headEl); - // Table height from bottom height-custom offset - - const paddingHeight = 32; - const borderHeight = 0; - // Pager height - let paginationHeight = 2; - if (!isBoolean(pagination)) { - if (!paginationEl) { - paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement; - } - if (paginationEl) { - const offsetHeight = paginationEl.offsetHeight; - paginationHeight += offsetHeight || 0; - } else { - // TODO First fix 24 - paginationHeight += 24; - } - } + const table = unref(tableElRef); + if (!table) return; + + const tableEl: Element = table.$el; + if (!tableEl) return; + const headEl = tableEl.querySelector('.ant-table-thead '); - let footerHeight = 0; - if (!isBoolean(pagination)) { - if (!footerEl) { - footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement; - } else { - const offsetHeight = footerEl.offsetHeight; - footerHeight += offsetHeight || 0; - } + if (!headEl) return; + + // Table height from bottom + const { bottomIncludeBody } = getViewportOffset(headEl); + // Table height from bottom height-custom offset + + const paddingHeight = 32; + const borderHeight = 0; + // Pager height + let paginationHeight = 2; + if (!isBoolean(pagination)) { + if (!paginationEl) { + paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement; + } + if (paginationEl) { + const offsetHeight = paginationEl.offsetHeight; + paginationHeight += offsetHeight || 0; + } else { + // TODO First fix 24 + paginationHeight += 24; } + } - let headerHeight = 0; - if (headEl) { - headerHeight = (headEl as HTMLElement).offsetHeight; + let footerHeight = 0; + if (!isBoolean(pagination)) { + if (!footerEl) { + footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement; + } else { + const offsetHeight = footerEl.offsetHeight; + footerHeight += offsetHeight || 0; } + } - let height = - bottomIncludeBody - - (resizeHeightOffset || 0) - - paddingHeight - - borderHeight - - paginationHeight - - footerHeight - - headerHeight; + let headerHeight = 0; + if (headEl) { + headerHeight = (headEl as HTMLElement).offsetHeight; + } - height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; - setHeight(height); + let height = + bottomIncludeBody - + (resizeHeightOffset || 0) - + paddingHeight - + borderHeight - + paginationHeight - + footerHeight - + headerHeight; - if (!bodyEl) { - bodyEl = tableEl.querySelector('.ant-table-body'); - } - bodyEl!.style.height = `${height}px`; - }, 200); + height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; + setHeight(height); + + if (!bodyEl) { + bodyEl = tableEl.querySelector('.ant-table-body'); + } + + bodyEl!.style.height = `${height}px`; } - useWindowSizeFn(calcTableHeight, 200); + useWindowSizeFn(calcTableHeight, 280); const getScrollX = computed(() => { let width = 0;