fix: 修复表格分页问题

JackySoft · Dec 18, 2024 · 169f66c · 169f66c
1 parent e7b22cd
commit 169f66c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/packages/editor/src/packages/Scene/MarsTable/MarsTable.tsx b/packages/editor/src/packages/Scene/MarsTable/MarsTable.tsx
@@ -71,7 +71,7 @@ const MarsTable = ({ id, type, config, elements, onCheckedChange }: ComponentTyp
     };
     setPageParams(params);
     getDataList(config.props.hidePager ? {} : params);
-  }, [config.api, JSON.stringify(config.props.field), config.api?.sourceType == 'variable' ? variableData : '']);
+  }, [config.api, config.props.pagination.pageSize, JSON.stringify(config.props.field), config.api?.sourceType == 'variable' ? variableData : '']);
 
   // 列表加载
   const getDataList = useCallback(
@@ -378,28 +378,30 @@ const MarsTable = ({ id, type, config, elements, onCheckedChange }: ComponentTyp
   // 分页配置
   const pagination: TablePaginationConfig = useMemo(() => {
     const { pageNum = 'pageNum', pageSize = 'pageSize' } = config.props.field || {};
-    const { showSizeChanger, showQuickJumper, showTotal, position } = config.props.pagination || {};
+    const { showSizeChanger, showQuickJumper, showTotal, pageSize: page_size, position } = config.props.pagination || {};
+    const pageSizeOptions = page_size ? [page_size, page_size * 2, page_size * 3, page_size * 4] : [10, 20, 30, 40];
     return {
       total,
       current: pageParams[pageNum] || 1,
       pageSize: pageParams[pageSize] || 10,
+      pageSizeOptions,
       showSizeChanger: showSizeChanger,
       showQuickJumper: showQuickJumper,
       showTotal: showTotal ? (total: number) => `共 ${total} 条数据` : undefined,
       position: position,
-      onChange: (pageNum: number, pageSize: number) => {
+      onChange: (num: number, size: number) => {
         setPageParams({
-          [pageNum]: pageNum,
-          [pageSize]: pageSize,
+          [pageNum]: num,
+          [pageSize]: size,
         });
         getDataList({
-          [pageNum]: pageNum,
-          [pageSize]: pageSize,
+          [pageNum]: num,
+          [pageSize]: size,
           ...searchParams,
         });
       },
     };
-  }, [config.props.field, config.props.pagination]);
+  }, [total, config.props.field, pageParams, config.props.pagination]);
 
   /**
    * 操作按钮点击

diff --git a/packages/materials/Scene/MarsTable/MarsTable.tsx b/packages/materials/Scene/MarsTable/MarsTable.tsx
@@ -59,14 +59,12 @@ const MarsTable = ({ config, elements, onCheckedChange }: ComponentType<IConfig>
   const variableData = usePageStore((state) => state.page.variableData);
 
   useEffect(() => {
-    setSearchParams(() => {
-      const params = {
-        [config.props.field.pageNum]: 1,
-        [config.props.field.pageSize]: config.props.pagination.pageSize,
-      };
-      getDataList(config.props.hidePager ? {} : params);
-      return params;
-    });
+    const params = {
+      [config.props.field.pageNum]: 1,
+      [config.props.field.pageSize]: config.props.pagination.pageSize,
+    };
+    setPageParams(params);
+    getDataList(config.props.hidePager ? {} : params);
   }, [config.api?.sourceType == 'variable' ? variableData : '']);
 
   // 列表加载
@@ -342,33 +340,35 @@ const MarsTable = ({ config, elements, onCheckedChange }: ComponentType<IConfig>
       dataSource: data,
       loading,
     };
-  }, [config.props, data, loading]);
+  }, [data, loading]);
 
   // 分页配置
   const pagination: TablePaginationConfig = useMemo(() => {
     const { pageNum = 'pageNum', pageSize = 'pageSize' } = config.props.field;
-    const { showSizeChanger, showQuickJumper, showTotal, position } = config.props.pagination || {};
+    const { showSizeChanger, showQuickJumper, showTotal, pageSize: page_size, position } = config.props.pagination || {};
+    const pageSizeOptions = page_size ? [page_size, page_size * 2, page_size * 3, page_size * 4] : [10, 20, 30, 40];
     return {
       total,
       current: pageParams[pageNum] || 1,
       pageSize: pageParams[pageSize] || 10,
+      pageSizeOptions,
       showSizeChanger: showSizeChanger,
       showQuickJumper: showQuickJumper,
       showTotal: showTotal ? (total: number) => `共 ${total} 条数据` : undefined,
       position: position,
-      onChange: (pageNum: number, pageSize: number) => {
+      onChange: (num: number, size: number) => {
         setPageParams({
-          [pageNum]: pageNum,
-          [pageSize]: pageSize,
+          [pageNum]: num,
+          [pageSize]: size,
         });
         getDataList({
-          [pageNum]: pageNum,
-          [pageSize]: pageSize,
+          [pageNum]: num,
+          [pageSize]: size,
           ...searchParams,
         });
       },
     };
-  }, [config.props.field, config.props.pagination]);
+  }, [total, pageParams]);
 
   /**
    * 操作按钮点击