diff --git a/packages/components/table/docs/Theme.zh.md b/packages/components/table/docs/Theme.zh.md index 45a257d33..3aee12d39 100644 --- a/packages/components/table/docs/Theme.zh.md +++ b/packages/components/table/docs/Theme.zh.md @@ -37,7 +37,6 @@ | `@table-head-icon-hover-background-color` | `@color-graphite-l40` | - | - | | `@table-head-font-weight` | `@font-weight-lg` | `@font-weight-md` | - | | `@table-body-hover-background` | `@background-color-light` | `@color-graphite-l50` | - | -| `@table-pagination-margin` | `@spacing-lg 0` | - | - | | `@table-icon-margin` | `@spacing-xs` | - | - | | `@table-filterable-trigger-font-size` | `@font-size-md` | `@font-size-sm` | - | | `@table-expandable-icon-size` | `@font-size-lg` | `@font-size-md` | - | diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx index 0ebccbd4d..f6a5f9217 100644 --- a/packages/components/table/src/Table.tsx +++ b/packages/components/table/src/Table.tsx @@ -41,11 +41,11 @@ export default defineComponent({ const locale = useGlobalConfig('locale') const config = useGlobalConfig('table') - const autoHeight = computed(() => props.autoHeight ?? config.autoHeight) + const mergedAutoHeight = computed(() => props.autoHeight ?? config.autoHeight) const mergedChildrenKey = computed(() => props.childrenKey ?? config.childrenKey) const mergedGetKey = useGetRowKey(props, config) const stickyContext = useSticky(props) - const scrollContext = useScroll(props, autoHeight, stickyContext) + const scrollContext = useScroll(props, mergedAutoHeight, stickyContext) const columnsContext = useColumns(props, slots, config, scrollContext.scrollBarSizeOnFixedHolder) const sortableContext = useSortable(columnsContext.flattedColumns) const filterableContext = useFilterable(columnsContext.flattedColumns) @@ -92,7 +92,7 @@ export default defineComponent({ const { borderless = config.borderless, size = config.size, scroll } = props return normalizeClass({ [prefixCls]: true, - [`${prefixCls}-auto-height`]: autoHeight.value, + [`${prefixCls}-auto-height`]: mergedAutoHeight.value, [`${prefixCls}-borderless`]: borderless, [`${prefixCls}-empty`]: flattedData.value.length === 0, [`${prefixCls}-full-height`]: scroll?.fullHeight, diff --git a/packages/components/table/src/composables/useScroll.ts b/packages/components/table/src/composables/useScroll.ts index 6c02fff89..466d83aab 100644 --- a/packages/components/table/src/composables/useScroll.ts +++ b/packages/components/table/src/composables/useScroll.ts @@ -7,6 +7,7 @@ import { type ComputedRef, type Ref, computed, onBeforeUnmount, ref } from 'vue' +import { useResizeObserver } from '@idux/cdk/resize' import { type VirtualScrollInstance, type VirtualScrollToFn, getScrollBarSize } from '@idux/cdk/scroll' import { Logger, convertCssPixel, convertElement } from '@idux/cdk/utils' @@ -15,7 +16,7 @@ import { type StickyContext } from './useSticky' export function useScroll( props: TableProps, - autoHeight: ComputedRef, + mergedAutoHeight: ComputedRef, { isSticky, setStickyScrollLeft }: StickyContext, ): ScrollContext { const { scrollHeadRef, scrollBodyRef, scrollFootRef, handleScroll, pingedStart, pingedEnd } = @@ -29,9 +30,18 @@ export function useScroll( props.scroll?.y && Logger.warn('components/table', '`scroll.y` was deprecated, please use `scroll.height` instead') + const scrollWithAutoHeight = ref(mergedAutoHeight.value) + useResizeObserver(scrollBodyRef, entry => { + if (!mergedAutoHeight.value) { + scrollWithAutoHeight.value = false + } else { + scrollWithAutoHeight.value = entry.target.scrollHeight > entry.target.clientHeight + } + }) + const scrollWidth = computed(() => convertCssPixel(props.scroll?.width || props.scroll?.x)) const scrollHeight = computed( - () => convertCssPixel(props.scroll?.height || props.scroll?.y) || (autoHeight.value ? 'auto' : ''), + () => convertCssPixel(props.scroll?.height || props.scroll?.y) || (scrollWithAutoHeight.value ? 'auto' : ''), ) const scrollBarSize = computed(() => getScrollBarSize(convertElement(scrollBodyRef))) diff --git a/packages/components/table/style/border.less b/packages/components/table/style/border.less index f042296ae..dfa3e3a51 100644 --- a/packages/components/table/style/border.less +++ b/packages/components/table/style/border.less @@ -1,5 +1,37 @@ @table-border: @table-border-width @table-border-style @table-border-color; +.@{table-prefix} { + th { + border-bottom: @table-border; + } + + thead > tr:not(:last-child) > th { + &[colspan] { + border-bottom: 0; + } + } + + td { + border-bottom: @table-border; + } + + &-footer { + border-bottom: @table-border; + } + + &-filterable-trigger { + &-footer { + border-top: @table-border; + } + } + + &-sticky { + &-scroll { + border-top: @table-border; + } + } +} + .@{table-prefix}:not(.@{table-prefix}-borderless), .@{table-prefix}:not(.@{table-prefix}-borderless) > .@{spin-prefix} > .@{spin-prefix}-container { > .@{header-prefix} { @@ -11,14 +43,15 @@ > .@{table-prefix}-fixed-holder, > .@{table-prefix}-content { border-left: @table-border; - + border-right: @table-border; + border-bottom: @table-border; > table { border-top: @table-border; - > thead > tr > th, - > tbody > tr > td, - > tfoot > tr > th, - > tfoot > tr > td { + > thead > tr > th:not(:last-child), + > tbody > tr > td:not(:last-child), + > tfoot > tr > th:not(:last-child), + > tfoot > tr > td:not(:last-child) { border-right: @table-border; } @@ -41,6 +74,10 @@ border-right: @table-border; } } + + > tbody > tr:last-child > td { + border-bottom: none; + } } } @@ -55,4 +92,26 @@ border: @table-border; border-top: 0; } + + > .@{table-prefix}-pagination { + border: @table-border; + border-top: 0; + padding: 4px 8px 3px; + } +} + +.@{table-prefix}.@{table-prefix}-auto-height, +.@{table-prefix}.@{table-prefix}-auto-height > .@{spin-prefix} > .@{spin-prefix}-container { + > .@{table-prefix}-container:not(.@{table-prefix}-scroll-vertical) { + > .@{table-prefix}-fixed-holder, + > .@{table-prefix}-content { + border-bottom: @table-border; + + > table { + > tbody > tr:last-child > td { + border-bottom: @table-border; + } + } + } + } } diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less index 008bd66d4..d4298d527 100644 --- a/packages/components/table/style/index.less +++ b/packages/components/table/style/index.less @@ -56,7 +56,6 @@ font-weight: @table-head-font-weight; line-height: @table-head-line-height; overflow-wrap: break-word; - border-bottom: @table-border-width @table-border-style @table-border-color; &:not(:last-child)::before { position: absolute; @@ -70,19 +69,12 @@ } } - thead > tr:not(:last-child) > th { - &[colspan] { - border-bottom: 0; - } - } - thead > tr > th[colspan]:not([colspan='1']) { text-align: center; } td { position: relative; - border-bottom: @table-border-width @table-border-style @table-border-color; line-height: @table-body-line-height; overflow-wrap: break-word; transition: background @transition-duration-base; @@ -146,7 +138,7 @@ &-pagination { display: flex; flex-wrap: wrap; - margin: @table-pagination-margin; + padding: 12px 0; > * { flex: none; @@ -247,7 +239,6 @@ font-size: @table-filterable-trigger-font-size; &-footer { - border-top: @table-border-width @table-border-style @table-border-color; padding: 8px 16px; text-align: right; @@ -351,7 +342,6 @@ display: flex; align-items: center; background: lighten(@border-color, 80%); - border-top: 1px solid @border-color; opacity: 0.6; &:hover { diff --git a/packages/components/table/style/themes/default.variable.less b/packages/components/table/style/themes/default.variable.less index 4820832d2..783e17910 100644 --- a/packages/components/table/style/themes/default.variable.less +++ b/packages/components/table/style/themes/default.variable.less @@ -42,8 +42,6 @@ @table-body-hover-background: @background-color-light; -@table-pagination-margin: @spacing-lg 0; - @table-icon-margin: @spacing-xs; @table-filterable-trigger-font-size: @font-size-md; @table-expandable-icon-size: @font-size-lg; diff --git a/packages/pro/table/style/index.less b/packages/pro/table/style/index.less index 48e323e7a..d956a4109 100644 --- a/packages/pro/table/style/index.less +++ b/packages/pro/table/style/index.less @@ -1,7 +1,5 @@ -@import '../../style/mixins/reset.less'; - .@{pro-table-prefix} { - .reset-component(); + // .reset-component(); &-layout-tool { &-tree-without-children {