antd中使用Table手动进行分页

<Table<DataType>
          //获取勾选中的数据
          rowSelection={rowSelection}
          //当列过多时，固定某些列，实现左右滑动
          scroll={{ x: 'max-content' }}
          //字段名
          columns={columns}
          // rowKey={(record) => record.login.uuid}
          //每一行唯一的标识，也是勾选中拿到的数据
          rowKey={(record) => record}
          //后端接口返回的数据，在这里进行赋值，数组
          dataSource={data}
          //设置分页
          pagination={{
            // 设置总条数
            total: tableParams.total,
            //是否显示分页器
            showSizeChanger: true,
            //是否可以快速跳转至某页
            showQuickJumper: true,
            //对分页文字的样式进行修改
            showTotal: (total) => {
               return (
                  <span
                     style={{
                        fontSize: 16,
                        color: '#264653',
                        fontFamily: "微软雅黑",
                     }}
                   >共{total}条数据</span>
              )
           },
           //每页条数
           pageSize:tableParams.per_page,
           //点击第二页，第三页触发的事件（切换分页时触发的事件，这里可以获取到点击的分页，和每页的数据的参数）
           onChange: ((page, pageSize) => {
            console.log(page,'page111',pageSize)
            //修改分页，初始化了分页的数据，这里进行修改
            setTableParams({
                  page: page,
                  per_page: pageSize
            }, () => {
              fetchData()
            })
        }),
        // 点击了每页多少条的按钮，触发的事件
        onShowSizeChange: onshuju


          }}
          //添加加载时的loading
          loading={loading}
          style={{ tableLayout: 'fixed' }}
          
        />

方法事件

//定义加载动画效果
const [loading, setLoading] = useState(false);

//定义初始化分页的数据
const [tableParams, setTableParams] = useState<TableParams>({
  
      page: 1,
      per_page: 10,
  });
//定义接口返回的数据
const [data, setData] = useState<DataType[]>();
// 定义勾选中的选中的数据
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
 //编写调用接口的逻辑
  const fetchData = async() => {
    setLoading(true);
   const res= await UserList(tableParams)
   
   setData(res.data.results)
//对分页进行处理，以及添加总条数
   setTableParams({
     ...tableParams,
     total: res.data.total_count
   })
   setLoading(false);
  };
    //当点击别的页面，以及选择一页多少条时，重新刷新接口
  useEffect(() =>{
    fetchData()
  },[tableParams.page,tableParams.per_page])

//勾选中的数据事件（一起用和下面的事件）
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
//勾选中的数据事件
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };






//点击了每页多少条，触发的事件，修改分页
 const onshuju = (page:number,pageSize:number) =>{
      setTableParams({
        page: page,
        per_page: pageSize
      })
  }

定义接口限制类型

interface DataType {
  page:string,
  // key: React.Key;
  title: string;
  status: number;
  read_count:string;
  id:string;
  pubdate:string;
}