antd 表格列 可选择 分页查询调接口,多选状态记录

可以使用 Ant Design 的 Table 组件来实现可选择的分页查询和多选状态记录。具体步骤如下：

1. 在 Table 组件中设置 `rowSelection` 属性，值为一个对象，其中 `type` 属性值为 `'checkbox'` 表示开启多选功能，`onChange` 属性值为一个函数，用于记录选中的行数据。

import { Table } from 'antd';

const columns = [
  // 列定义
];

const data = [
  // 数据
];

function MyTable() {
  const [selectedRows, setSelectedRows] = useState([]);

  const rowSelection = {
    type: 'checkbox',
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRows(selectedRows);
    },
  };

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

2. 在 Table 组件中设置 `pagination` 属性，值为一个对象，其中 `pageSize` 属性表示每页显示的数据条数，`total` 属性表示数据总条数，`onChange` 属性值为一个函数，用于处理翻页事件，向后端接口请求数据。

import { Table } from 'antd';

const columns = [
  // 列定义
];

const data = [
  // 数据
];

function MyTable() {
  const [selectedRows, setSelectedRows] = useState([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: data.length,
  });

  const handleTableChange = (pagination) => {
    setPagination(pagination);
    // 向后端接口请求数据，根据 pagination 中的参数获取对应页的数据
  };

  const rowSelection = {
    type: 'checkbox',
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRows(selectedRows);
    },
  };

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

3. 在后端接口中，根据前端传递的参数，进行数据分页查询，并将查询结果返回给前端。前端接收到查询结果后，更新 Table 组件的 `dataSource` 属性，即可实现分页查询。

以上就是实现可选择分页查询和多选状态记录的方法。希望能对你有所帮助！