antd 表格列 可选择 分页查询调接口 完整代码

以下是一个antd表格列可选择和分页查询调接口的完整代码示例：

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import axios from 'axios';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const TableWithSelection = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [data, setData] = useState([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  const fetchData = async (params = {}) => {
    const result = await axios.get('/api/data', {
      params: {
        ...params,
        pageSize: pagination.pageSize,
        current: pagination.current,
      },
    });
    setData(result.data.data);
    setPagination({
      ...pagination,
      total: result.data.total,
    });
  };

  useEffect(() => {
    fetchData();
  }, []);

  const onSelectChange = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
  };

  const handleTableChange = (pagination) => {
    setPagination(pagination);
    fetchData({
      pageSize: pagination.pageSize,
      current: pagination.current,
    });
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <Table
      rowSelection={rowSelection}
      columns={columns}
      dataSource={data}
      pagination={pagination}
      onChange={handleTableChange}
    />
  );
};

export default TableWithSelection;

在这个例子中，我们使用了antd的Table组件并传入了列（columns）、数据（dataSource）、分页（pagination）和onChange事件处理程序（handleTableChange）。我们还使用了antd的rowSelection组件来启用表格选择，并处理选择更改的事件。

当用户更改选择时，onSelectChange函数会设置selectedRowKeys状态。当用户更改分页时，handleTableChange函数会更新pagination状态并调用fetchData函数以获取新的数据。

fetchData函数使用axios库来发送GET请求，并将参数传递给后端API。在这个例子中，我们使用了一个虚拟的API，它返回一个JSON对象，其中包含数据和总数。

请注意，这个例子中的API地址是“/api/data”，您需要将其替换为您自己的API地址。