fix(Table): 解决设置了分页的情况下，调整表格分页条数后，如果翻页，分页条数会重置的问题。 (#1270)

CHANGELOG.zh_CN.md

@@ -11,6 +11,7 @@
   - 修复`inset`属性不起作用的问题
   - 修复`useTable`与`BasicTable`实例的`reload`方法`await`表现不一致的问题
   - 修复`clickToRowSelect`会无视行选择框 disabled 状态的问题
+  - 修复`BasicTable`在某些情况下，分页会被重置的问题
 - **BasicModal**
   - 修复点击遮罩、按下`Esc`键都不能关闭`Modal`的问题
   - 修复点击关闭按钮、最大化按钮旁边的空白区域也会导致`Modal`关闭的问题

mock/demo/table-demo.ts

@@ -12,7 +12,7 @@ function getRandomPics(count = 10): string[] {
 
 const demoList = (() => {
   const result: any[] = [];
-  for (let index = 0; index < 60; index++) {
+  for (let index = 0; index < 200; index++) {
     result.push({
       id: `${index}`,
       beginTime: '@datetime',

src/components/Table/src/hooks/usePagination.tsx

@@ -1,6 +1,6 @@
 import type { PaginationProps } from '../types/pagination';
 import type { BasicTableProps } from '../types/table';
-import { computed, unref, ref, ComputedRef, watchEffect } from 'vue';
+import { computed, unref, ref, ComputedRef, watch } from 'vue';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
 import { isBoolean } from '/@/utils/is';
 import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
@@ -27,15 +27,17 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
   const configRef = ref<PaginationProps>({});
   const show = ref(true);
 
-  watchEffect(() => {
+  watch(
-    const { pagination } = unref(refProps);
+    () => unref(refProps).pagination,
-    if (!isBoolean(pagination) && pagination) {
+    (pagination) => {
-      configRef.value = {
+      if (!isBoolean(pagination) && pagination) {
-        ...unref(configRef),
+        configRef.value = {
-        ...(pagination ?? {}),
+          ...unref(configRef),
-      };
+          ...(pagination ?? {}),
-    }
+        };
-  });
+      }
+    },
+  );
 
   const getPaginationInfo = computed((): PaginationProps | boolean => {
     const { pagination } = unref(refProps);

src/views/demo/table/FetchTable.vue

@@ -22,6 +22,7 @@
         title: '远程加载示例',
         api: demoListApi,
         columns: getBasicColumns(),
+        pagination: { pageSize: 10 },
       });
       function handleReloadCurrent() {
         reload();