feat(comp:table): add pagination slot (#1716)

IDuxFE · Oct 30, 2023 · b653faf · b653faf
1 parent 7b739aa
commit b653faf
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/packages/components/table/docs/Api.zh.md b/packages/components/table/docs/Api.zh.md
@@ -189,7 +189,7 @@ export type TablePaginationPosition = 'topStart' | 'top' | 'topEnd' | 'bottomSta
 | `empty` | 自定义空状态 | - | - |
 | `footer` | 表格尾部 | - | - |
 | `header` | 表格头部 | - | - |
-| `summary` | 表格总结栏 | - | - |
+| `pagination` | 表格分页条 | `PaginationProps` | - |
 
 #### TableMethods
 

diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx
@@ -124,7 +124,12 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
       const header = <ɵHeader v-slots={slots} header={props.header} />
       const footer = renderFooter(slots, prefixCls)
-      const [paginationTop, paginationBottom] = renderPagination(mergedPagination.value, filteredData.value, prefixCls)
+      const [paginationTop, paginationBottom] = renderPagination(
+        slots,
+        mergedPagination.value,
+        filteredData.value,
+        prefixCls,
+      )
       const children = [header]
       const resetChildren = [paginationTop, <MainTable />, footer, paginationBottom].filter(Boolean) as VNode[]
       const spinProps = convertSpinProps(props.spin)

diff --git a/packages/components/table/src/other/Pagination.tsx b/packages/components/table/src/other/Pagination.tsx
@@ -7,26 +7,29 @@
 
 import type { MergedData } from '../composables/useDataSource'
 import type { TablePagination } from '../types'
-import type { VNode } from 'vue'
+import type { Slots, VNodeChild } from 'vue'
 
 import { kebabCase } from 'lodash-es'
 
 import { IxPagination } from '@idux/components/pagination'
 
 export function renderPagination(
+  slots: Slots,
   mergedPagination: TablePagination | null,
   filteredData: MergedData[],
   prefixCls: string,
-): [VNode | null, VNode | null] {
-  let top: VNode | null = null
-  let bottom: VNode | null = null
+): [VNodeChild | null, VNodeChild | null] {
+  let top: VNodeChild | null = null
+  let bottom: VNodeChild | null = null
 
   if (mergedPagination !== null) {
     const { position } = mergedPagination
     const [vertical, horizontal] = kebabCase(position).split('-')
     const className = `${prefixCls}-pagination ${prefixCls}-pagination-${horizontal}`
 
-    const node = <IxPagination class={className} total={filteredData.length} {...mergedPagination} />
+    const node = slots.pagination?.({ total: filteredData.length, ...mergedPagination }) ?? (
+      <IxPagination class={className} total={filteredData.length} {...mergedPagination} />
+    )
 
     top = vertical === 'top' ? node : null
     bottom = vertical === 'bottom' ? node : null