fix(table): pagination (#2954)

Tencent · Dec 15, 2023 · 18bdc4d · 18bdc4d
1 parent e8c2e76
commit 18bdc4d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/table/_example/pagination.vue b/src/table/_example/pagination.vue
@@ -78,10 +78,10 @@ export default {
        *    此时，注意需要在 onPageChange 中对 pagination.current 和 pagination.pageSize 进行赋值
        * */
       pagination: {
-        // current: 2,
-        // pageSize: 5,
-        defaultCurrent: 2,
-        defaultPageSize: 5,
+        current: 2,
+        pageSize: 5,
+        // defaultCurrent: 2,
+        // defaultPageSize: 5,
         total: TOTAL,
         showJumper: true,
       },
@@ -94,9 +94,11 @@ export default {
     },
     // 分页变化时触发该事件
     onPageChange(pageInfo, newData) {
-      // 受控用法所需，即使用 pagination.current 和 pagination.pageSize 时，必须保留恢复下面 2 行代码
-      // this.pagination.current = pageInfo.current;
-      // this.pagination.pageSize = pageInfo.pageSize;
+      if (!this.pagination.defaultCurrent) {
+        // 受控用法所需，即使用 pagination.current 和 pagination.pageSize 时，必须保留恢复下面 2 行代码
+        this.pagination.current = pageInfo.current;
+        this.pagination.pageSize = pageInfo.pageSize;
+      }
       console.log('page-change:', pageInfo, newData);
     },
     onSelectChange(selectedRowKeys, context) {

diff --git a/src/table/hooks/usePagination.tsx b/src/table/hooks/usePagination.tsx
@@ -43,7 +43,13 @@ export default function usePagination(props: TdBaseTableProps, context: SetupCon
     [data],
     () => {
       if (!pagination.value || !pagination.value.defaultCurrent) return;
-      updateDataSourceAndPaginate(pagination.value.defaultCurrent, pagination.value.defaultPageSize);
+      const isControlled = Boolean(pagination.value.current);
+      // 存在受控属性时，立即返回不再执行后续内容
+      if (isControlled) return;
+      updateDataSourceAndPaginate(
+        innerPagination.value?.current ?? pagination.value.defaultCurrent,
+        innerPagination.value?.pageSize ?? pagination.value.defaultPageSize,
+      );
     },
     { immediate: true },
   );
@@ -58,7 +64,7 @@ export default function usePagination(props: TdBaseTableProps, context: SetupCon
             props: pagination.value,
             on: {
               change: (pageInfo: PageInfo) => {
-                Object.assign(innerPagination.value, pageInfo);
+                innerPagination.value = pageInfo;
                 updateDataSourceAndPaginate(pageInfo.current, pageInfo.pageSize);
                 // Vue3 ignore this line
                 context.emit('page-change', pageInfo, dataSource.value);