fix(table): pagination (#2954)

Tencent · Dec 5, 2023 · cfe5f76 · cfe5f76
1 parent ac434b6
commit cfe5f76
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 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
@@ -48,8 +48,8 @@ export default function usePagination(props: TdBaseTableProps, context: SetupCon
       // 存在受控属性时，立即返回不再执行后续内容
       if (isControlled) return;
       updateDataSourceAndPaginate(
-        innerPagination.value.current ?? pagination.value.defaultCurrent,
-        innerPagination.value.pageSize ?? pagination.value.defaultPageSize,
+        innerPagination.value?.current ?? pagination.value.defaultCurrent,
+        innerPagination.value?.pageSize ?? pagination.value.defaultPageSize,
       );
     },
     { immediate: true },
@@ -65,7 +65,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);