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

好的，以下是一个基本的示例代码，可以实现antd表格列可选择、分页查询调接口、多选状态提交记录的功能。具体实现可以根据自己的需求进行修改和调整。

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

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
];

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

  const fetchData = () => {
    setLoading(true);
    axios.get('/api/data', {
      params: {
        page: pagination.current,
        pageSize: pagination.pageSize,
      },
    }).then(res => {
      setData(res.data.list);
      setPagination({
        ...pagination,
        total: res.data.total,
      });
      setLoading(false);
    }).catch(err => {
      setLoading(false);
    });
  };

  const handleTableChange = (pagination) => {
    setPagination(pagination);
    fetchData();
  };

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

  const handleDelete = () => {
    axios.post('/api/delete', {
      ids: selectedRowKeys,
    }).then(res => {
      setSelectedRowKeys([]);
      fetchData();
    }).catch(err => {
      //
    });
  };

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

  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" onClick={handleDelete} disabled={selectedRowKeys.length === 0}>删除</Button>
        <span style={{ marginLeft: 8 }}>{`已选择 ${selectedRowKeys.length} 项`}</span>
      </div>
      <Table
        rowKey="id"
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        pagination={pagination}
        loading={loading}
        onChange={handleTableChange}
      />
    </>
  );
};

export default DataList;

在上面的代码中，我们首先定义了表格的列配置，包括姓名、年龄、性别等列。然后，在组件中定义了一些状态变量，包括选择的行、数据列表、加载状态和分页信息等。

在组件挂载完成后，我们调用了 `fetchData` 方法来获取第一页的数据，并更新数据列表和分页信息。然后，在表格中使用了 `rowSelection` 属性来启用多选功能，并绑定了 `handleSelectChange` 方法来处理选择的行。我们还在表格的顶部添加了一个删除按钮，点击按钮时将调用 `handleDelete` 方法，该方法将已选择的记录的 ID 提交到后台进行删除操作，并在删除成功后更新数据列表。

最后，我们将表格渲染到组件中，并将数据、分页信息、加载状态、选择的行、表格列配置等属性传递给表格组件。在表格组件中，我们还绑定了 `handleTableChange` 方法来处理分页信息的变化，当用户切换分页时，将重新获取对应页码的数据，并更新数据列表和分页信息。