diff --git a/packages/components/table-v2/src/renderers/footer.tsx b/packages/components/table-v2/src/renderers/footer.tsx new file mode 100644 index 0000000000..8cbbd7e648 --- /dev/null +++ b/packages/components/table-v2/src/renderers/footer.tsx @@ -0,0 +1,18 @@ +import type { CSSProperties, FunctionalComponent } from 'vue' + +type FooterRendererProps = { + class?: JSX.IntrinsicAttributes['class'] + style: CSSProperties +} + +const Footer: FunctionalComponent = (props, { slots }) => { + return ( +
+ {slots.default?.()} +
+ ) +} + +Footer.displayName = 'ElTableV2Footer' + +export default Footer diff --git a/packages/components/table-v2/src/table-v2.tsx b/packages/components/table-v2/src/table-v2.tsx index a27b0f4b3d..4a13f835f5 100644 --- a/packages/components/table-v2/src/table-v2.tsx +++ b/packages/components/table-v2/src/table-v2.tsx @@ -11,6 +11,7 @@ import Row from './renderers/row' import Cell from './renderers/cell' import Header from './renderers/header' import HeaderCell from './renderers/header-cell' +import Footer from './renderers/footer' import type { TableGridRowSlotParams } from './table-grid' import type { TableV2RowCellRenderParam } from './table-row' @@ -50,6 +51,7 @@ const TableV2 = defineComponent({ bodyWidth, rootStyle, headerWidth, + footerHeight, getRowHeight, onColumnSorted, @@ -258,11 +260,17 @@ const TableV2 = defineComponent({ }, ] + const footerProps = { + class: ns.e('footer'), + style: unref(footerHeight), + } + return (
{tableSlots} {tableSlots} {tableSlots} +
{{ default: slots.footer }}
) } diff --git a/packages/components/table-v2/src/use-table.ts b/packages/components/table-v2/src/use-table.ts index 7a800185c0..1b3e2ff7ec 100644 --- a/packages/components/table-v2/src/use-table.ts +++ b/packages/components/table-v2/src/use-table.ts @@ -78,7 +78,7 @@ function useTable(props: TableV2Props) { }) const flattenedData = computed(() => { - const depths = {} + const depths: Record = {} const { data, rowKey } = props const _expandedRowKeys = unref(expandedRowKeys) @@ -153,6 +153,10 @@ function useTable(props: TableV2Props) { return height - footerHeight }) + const footerHeight = computed(() => + enforceUnit({ height: props.footerHeight }) + ) + const fixedTableHeight = computed(() => { const { maxHeight } = props const tableHeight = unref(mainTableHeight) @@ -421,6 +425,7 @@ function useTable(props: TableV2Props) { bodyWidth, rootStyle, headerWidth, + footerHeight, mainTableHeight, fixedTableHeight, leftTableWidth, diff --git a/packages/components/table-v2/src/utils.ts b/packages/components/table-v2/src/utils.ts index e33324767d..d37fd4d674 100644 --- a/packages/components/table-v2/src/utils.ts +++ b/packages/components/table-v2/src/utils.ts @@ -18,7 +18,7 @@ export const tryCall = ( } export const enforceUnit = (style: CSSProperties) => { - ;['width', 'maxWidth', 'minWidth', 'height'].forEach((key) => { + ;(['width', 'maxWidth', 'minWidth', 'height'] as const).forEach((key) => { style[key] = addUnit(style[key]) }) diff --git a/packages/theme-chalk/src/table-v2.scss b/packages/theme-chalk/src/table-v2.scss index 75b80fe072..33f05c21c2 100644 --- a/packages/theme-chalk/src/table-v2.scss +++ b/packages/theme-chalk/src/table-v2.scss @@ -110,6 +110,14 @@ overflow: hidden; } + @include e('footer') { + position: absolute; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + } + @include e('header-row') { display: flex; border-bottom: getCssVar('table', 'border'); diff --git a/packages/utils/vue/style.ts b/packages/utils/vue/style.ts index 3e31973371..a8b7ca7661 100644 --- a/packages/utils/vue/style.ts +++ b/packages/utils/vue/style.ts @@ -3,7 +3,10 @@ import { debugWarn } from '../error' const SCOPE = 'utils/vue/style' -export function addUnit(value: string | number, defaultUnit = 'px') { +export function addUnit( + value: string | number | undefined, + defaultUnit = 'px' +) { if (!value) return '' if (isString(value)) { return value