select是多选的，可查询多个动态表格，多表格分页问题解决方法

import React from "react";
import Form, { FormComponentProps } from "antd/lib/form/Form";
import { StyleAntdTable } from "../../components/style-antd-table";
import { Table, Tooltip } from "antd";
import { ImportExportListColums, ImportExportListIn, Paginations, RecordList } from "../../models/zjddc";
import { NameStyle } from "./style";
import { PaginationConfig } from "antd/lib/pagination";

type Props = FormComponentProps & {
  /** 列表接口返回数据*/
  listValue: ImportExportListIn;
  /** 下标*/
  index: number;
  /** 接受传出数据*/
  // eslint-disable-next-line @typescript-eslint/ban-types
  tableOnCheck(any: object): void;
 /** 分页信息 */
  pageInfo: RecordList[];
}

interface State {
  /** 分页数据 */
  pagination: Paginations;
  /** 当前分页的表名 */
  currentName: string;
}
/** table */
class TableComponent extends React.Component<Props, State> {
  state: State = {
    pagination: {
      total: 0,
      current: 1,
      pageSize: 10,
      size: "small",
      pageSizeOptions: ["10", "30", "45"],
      defaultCurrent: 1,
    },
    currentName: "",
  };

  /** 分页变化触发事件 */
  paginationChange = (page: PaginationConfig, name: string) => {
// ！！！！！通过tableOnCheck往父组件传分页参数
    this.props.tableOnCheck({ name, pageNum: page.current, pageSize: page.pageSize })
  }

  render() {
    const { index, listValue, pageInfo} = this.props;
    const xWidth = (listValue?.table === "SUYQR" || listValue?.table === "SHYQR" || listValue?.table === "ZJDZD" || listValue?.table === "NMFW") ? 5500 : (listValue?.table === "NHHNCY" || listValue?.table === "NMFWLY" || listValue?.table === "ZRZ") ? 2000 : undefined;
    const tabelColumns = listValue?.colums?.map(item => ({
      title: item.title,
      dataIndex: item.index,
      key: item.index,
      render: (value: any) =>
      (<Tooltip title={value}>
        <span style={{ cursor: "pointer" }}>
          {value}
        </span>
      </Tooltip>),
    }))
    
    const pageInfoObj: PageInfoList = {
      pageSize: 10,
      current: 1,
    };
// 根据每个表名匹配每个表格的分页情况
    pageInfo && pageInfo.length > 0 && pageInfo.forEach(item => {
      if (item.name === listValue?.table) {
        pageInfoObj.current = item.pageNum
        pageInfoObj.pageSize = item.pageSize
      }
    })

    return (<StyleAntdTable key={index}>
      <NameStyle>{listValue?.tableName}</NameStyle>
      <Table
        columns={tabelColumns}
        dataSource={listValue?.data}
        scroll={{ y: "calc(100vh - 300px - 20px)", x: xWidth }}
// 分页、排序、筛选变化时触发，传分页参数和表名参数过去
        onChange={(page) => this.paginationChange(page, listValue?.table)}
        pagination={{
          current: pageInfoObj.current,
          pageSize: pageInfoObj.pageSize,
          total: listValue?.total,
          showSizeChanger: true,
          showQuickJumper: true,
          hideOnSinglePage: true,
          showTotal: total => `总计${total}条`,
        }}
      />
     
    </StyleAntdTable>
    );
  }
}
export default Form.create<Props>()(TableComponent);

子组件：表格组件分页往父组件的，传参数过程

父组件，定义分页参数，如下 

父组件接收参数后，调用查询表格接口的方法：

 /** 获取分页参数 */
  tableOnCheck = (info: any) => {
    console.log(info, "info--");
    // info:是当前最新分页的对象
    const { pageInfo } = this.state;
    const newDataName = pageInfo.map(item => {
      if (info.name === item.name) {
        return info
        /** 返回最新分页的对象
         {name: 'ZJDLY', pageNum: 5, pageSize: 10}
        */
      } else {
         /** 返回已经存在的分页对象
         {name: 'ZJDLY2', pageNum: 6, pageSize: 10}
        */
        return item;
      }
    })
    console.log(newDataName, "newDataName--")
    this.setState({
      pageInfo: newDataName,
    }, () => {
      this.getData()
    });
  }

上面方法根据从handleSelectChange获取的pageInfo表格的分页参数，不重置的情况下，在已经选择的表格基础上增加表格和减少表格，分为2中情况， pageInfo.length > 0和不大于0的情况


  /** 选择数据库表，要考虑新增表和删除表 */
  handleSelectChange = (value: string[]) => {
    console.log(value, "value-->");
    const { pageInfo } = this.state;
    let newPageInfo: any[] = [];
    // 处理后面选择的表数组
    if (pageInfo && pageInfo.length > 0) {
      // 先获取所有的表名
      const arr: string[] = [];
      pageInfo.forEach(item => {
        arr.push(item.name);
      })
      newPageInfo = value.map(item => {
        // 获取下标位置,查找指定字符串第一次出现的位置返回下标，如果没有返回-1
        const len = arr.indexOf(item);
        console.log(len, "len");
        if (len > -1) {
          // 从pageInfo取对应下标位置
          return pageInfo[len]
        } else {
          return { name: item, pageNum: 1, pageSize: 10 }
        }
      })
      console.log(newPageInfo, "newPageInfo--->0");
      // 新选的表名
      // const arr2 = value.filter(item => {
        // 过滤后返回不存在的对象数组
      //   return !arr.includes(item);
      // })
      // 给新选表格的默认值
      // const arr3 = arr2.map(item => {
      //   return { name: item, pageNum: 1, pageSize: 10 }
      // })
      // 给拼接2个数组
      // newPageInfo = pageInfo.concat(arr3)
    } else {
      // 第一次选择表的数组
      newPageInfo = value.map(item => {
        return { name: item, pageNum: 1, pageSize: 10 }
      })
      console.log(newPageInfo, "newPageInfo---");
    }
    this.setState({
      dataName: value,
      pageInfo: newPageInfo,
    })
  };

页面大概如下图

注意：

1、多个表格，必须每个表格对应一组分页参数即pageInfo数组

2、子组件表格里，先存好最新分页的表格，和表格分页的对象参数，传给父组件即info

3、父组件在接收分页参数时，要存上所有表格的分页参数，在tableOnCheck方法里，将新添加的表格分页参数和已经分页过的分页参数对象，全都存入pageInfo数组

4、在选择数据库表的方法里，根据pageInfo数组是否存在值，来给pageInfo匹配正确的分页参数值

以上处理方法还存在一个问题如下： 

解决方法：

render() {
    const { index, listValue, pageInfo } = this.props;
    const xWidth = (listValue?.table === "SUYQR" || listValue?.table === "SHYQR" || listValue?.table === "ZJDZD" || listValue?.table === "NMFW") ? 5500 : (listValue?.table === "NHHNCY" || listValue?.table === "NMFWLY" || listValue?.table === "ZRZ") ? 2000 : undefined;
    const tabelColumns = listValue?.colums?.map(item => ({
      title: item.title,
      dataIndex: item.index,
      key: item.index,
      render: (value: any) =>
      (<Tooltip title={value}>
        <span style={{ cursor: "pointer" }}>
          {value}
        </span>
      </Tooltip>),
    }))
/***--->分页代码
    const pageInfoObj: PageInfoList = {
      pageSize: 10,
      current: 1,
    };
    pageInfo && pageInfo.length > 0 && pageInfo.forEach(item => {
      if (item.name === listValue?.table) {
        pageInfoObj.current = item.pageNum
        pageInfoObj.pageSize = item.pageSize
      }
    })
--->***/
    return (<StyleAntdTable key={index}>
      <NameStyle>{listValue?.tableName}</NameStyle>
      <Table
        columns={tabelColumns}
        dataSource={listValue?.data}
        scroll={{ y: "calc(100vh - 300px - 20px)", x: xWidth }}
        onChange={(page) => this.paginationChange(page, listValue?.table)}
        pagination={{
/***--->
          current: pageInfoObj.current,
          pageSize: pageInfoObj.pageSize,
--->***/
          total: listValue?.total,
          showSizeChanger: true,
          showQuickJumper: true,
          hideOnSinglePage: true,
          showTotal: total => `总计${total}条`,
        }}
      />
    </StyleAntdTable>
    );
  }