fix(comp:table): pagination should render but hide when empty (#1940)

IDuxFE · Jun 12, 2024 · e2f7a65 · e2f7a65
1 parent 502d8ce
commit e2f7a65
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx
@@ -186,25 +186,21 @@ export default defineComponent({
       const header = <ɵHeader v-slots={slots} header={props.header} />
       const footer = renderFooter(slots, prefixCls)
 
+      const [paginationTop, paginationBottom] = renderPagination(
+        slots,
+        mergedPagination.value,
+        filteredData.value,
+        flattedData.value.length > 0,
+        prefixCls,
+      )
       const children = [header]
-      let resetChildren = [<MainTable />, footer].filter(Boolean) as VNode[]
-
-      if (flattedData.value.length > 0) {
-        const [paginationTop, paginationBottom] = renderPagination(
-          slots,
-          mergedPagination.value,
-          filteredData.value,
-          prefixCls,
-        )
-
-        resetChildren = [paginationTop, ...resetChildren, paginationBottom].filter(Boolean) as VNode[]
-      }
+      const restChildren = [paginationTop, <MainTable />, footer, paginationBottom].filter(Boolean) as VNode[]
 
       const spinProps = convertSpinProps(props.spin)
       if (spinProps) {
-        children.push(<IxSpin {...spinProps}>{resetChildren}</IxSpin>)
+        children.push(<IxSpin {...spinProps}>{restChildren}</IxSpin>)
       } else {
-        children.push(...resetChildren)
+        children.push(...restChildren)
       }
       return <div class={classes.value}>{children}</div>
     }

diff --git a/packages/components/table/src/other/Pagination.tsx b/packages/components/table/src/other/Pagination.tsx
@@ -17,6 +17,7 @@ export function renderPagination(
   slots: Slots,
   mergedPagination: TablePagination | null,
   filteredData: MergedData[],
+  visible: boolean,
   prefixCls: string,
 ): [VNodeChild | null, VNodeChild | null] {
   let top: VNodeChild | null = null
@@ -28,7 +29,7 @@ export function renderPagination(
     const className = `${prefixCls}-pagination ${prefixCls}-pagination-${horizontal}`
 
     const node = slots.pagination?.({ total: filteredData.length, ...mergedPagination }) ?? (
-      <IxPagination class={className} total={filteredData.length} {...mergedPagination} />
+      <IxPagination v-show={visible} class={className} total={filteredData.length} {...mergedPagination} />
     )
 
     top = vertical === 'top' ? node : null