fix: 修复分页配置无法透传 (#2666)

antvis · Apr 26, 2024 · 323f14d · 323f14d
1 parent 23ee734
commit 323f14d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/packages/s2-vue/src/components/pagination/index.vue b/packages/s2-vue/src/components/pagination/index.vue
@@ -25,6 +25,7 @@ export default defineComponent({
       type: Number,
       default: DEFAULT_PAGE_SIZE,
     },
+    customOptions: Object,
   },
   emits: ['change', 'showSizeChange'] as unknown as {
     change: (current: number) => void;
@@ -49,14 +50,15 @@ export default defineComponent({
 <template>
   <div :class="PRE_CLASS">
     <AntDPagination
+      size="small"
       :default-current="1"
+      :showSizeChanger="true"
+      :showQuickJumper="showQuickJumper"
+      v-bind="customOptions"
       :current="current"
       :total="total"
       :pageSize="pageSize"
-      :showSizeChanger="true"
       @showSizeChange="(_, size) => $emit('showSizeChange', size)"
-      size="small"
-      :showQuickJumper="showQuickJumper"
       @change="(current) => $emit('change', current)"
     />
     <span :class="`${PRE_CLASS}-count`">

diff --git a/packages/s2-vue/src/components/sheets/base-sheet.vue b/packages/s2-vue/src/components/sheets/base-sheet.vue
@@ -67,6 +67,7 @@ export default defineComponent({
         :current="pagination.current.value"
         :pageSize="pagination.pageSize.value"
         :total="pagination.total.value"
+        :customOptions="pagination.customOptions"
         @change="handlePageChange"
         @showSizeChange="handlePageSizeChange"
       />

diff --git a/packages/s2-vue/src/hooks/usePagination.ts b/packages/s2-vue/src/hooks/usePagination.ts
@@ -5,7 +5,7 @@ import {
   type SpreadSheet,
 } from '@antv/s2';
 import { computed, ref, watch, type Ref } from 'vue';
-import { isEmpty } from 'lodash';
+import { isEmpty, omit } from 'lodash';
 import type { BaseSheetProps } from '../utils/initPropAndEmits';
 
 export const DEFAULT_PAGE_NUMBER = 1;
@@ -15,12 +15,12 @@ export const usePagination = (
   s2Ref: Ref<SpreadSheet | undefined>,
   props: BaseSheetProps,
 ) => {
-  const current = ref(
-    props.options?.pagination?.current ?? DEFAULT_PAGE_NUMBER,
-  );
-  const pageSize = ref(
-    props.options?.pagination?.pageSize ?? DEFAULT_PAGE_SIZE,
-  );
+  const {
+    options: { pagination: paginationCfg },
+    showPagination,
+  } = props;
+  const current = ref(paginationCfg?.current ?? DEFAULT_PAGE_NUMBER);
+  const pageSize = ref(paginationCfg?.pageSize ?? DEFAULT_PAGE_SIZE);
   const total = ref(0);
 
   const change = (nextCurrent: number) => {
@@ -31,17 +31,17 @@ export const usePagination = (
     pageSize.value = nextPageSize;
   };
 
-  const visible = computed(
-    () => props.showPagination && !isEmpty(props.options?.pagination),
-  );
+  const visible = computed(() => {
+    return showPagination && !isEmpty(paginationCfg);
+  });
 
   // sync state.pagination -> s2.pagination
   watch([current, pageSize], () => {
     if (!s2Ref.value) {
       return;
     }
 
-    const nextPagination = isEmpty(props.options?.pagination)
+    const nextPagination = isEmpty(paginationCfg)
       ? (null as unknown as Pagination)
       : {
           current: current.value,
@@ -54,10 +54,10 @@ export const usePagination = (
 
   // sync props.pagination -> state.pagination
   watch(
-    [() => props.options?.pagination, s2Ref],
+    [() => paginationCfg, s2Ref],
     () => {
-      current.value = props.options?.pagination?.current ?? DEFAULT_PAGE_NUMBER;
-      pageSize.value = props.options?.pagination?.pageSize ?? DEFAULT_PAGE_SIZE;
+      current.value = paginationCfg?.current ?? DEFAULT_PAGE_NUMBER;
+      pageSize.value = paginationCfg?.pageSize ?? DEFAULT_PAGE_SIZE;
       total.value = s2Ref.value?.facet?.viewCellHeights.getTotalLength() ?? 0;
     },
     {
@@ -74,7 +74,7 @@ export const usePagination = (
     const totalUpdateCallback: EmitterType[S2Event.LAYOUT_PAGINATION] = (
       data,
     ) => {
-      if (isEmpty(props.options?.pagination)) {
+      if (isEmpty(paginationCfg)) {
         return;
       }
 
@@ -89,6 +89,7 @@ export const usePagination = (
   });
 
   return {
+    customOptions: omit(paginationCfg, ['current', 'pageSize', 'total']),
     visible,
     current,
     pageSize,