antd table 跨页勾选

在Ant Design（antd）的Table组件中，如果需要实现跨页的表格并且允许用户选择多行数据，通常我们会配合Table的`selection`属性以及分页功能来完成。`selection`属性可以设置成`rowSelection`，它提供了一种简单的模式让你可以选择一行或多行。

以下是一个基本的示例：

import { Table, Button } from 'antd';

const columns = [
  // ...其他列...
  {
    type: 'selection',
    // 控制是否显示选择列
    width: 60,
  },
  // 其他列...
];

class MultiPageTable extends React.Component {
  state = {
    selectedRows: [],
    pageSize: 10, // 每页显示的数量
    currentPage: 1, // 当前页数
  };

  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRows: selectedRowKeys });
  };

  handlePreviousPage = () => {
    if (this.state.currentPage > 1) {
      this.setState({ currentPage: this.state.currentPage - 1 });
    }
  };

  handleNextPage = () => {
    const { pageSize, currentPage, total } = this.state;
    if (currentPage + 1 <= Math.ceil(total / pageSize)) {
      this.setState({ currentPage: currentPage + 1 });
    }
  };

  // 根据当前页和每页数量获取实际的数据
  getDataSource = () => {
    // 这里假设你有一个加载数据的方法，比如从服务器获取
    const { selectedRows, currentPage, pageSize } = this.state;
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;

    return yourData.slice(startIndex, endIndex).filter(row => selectedRows.includes(row.key));
  };

  render() {
    const dataSource = this.getDataSource();
    return (
      <Table
        rowKey="key"
        columns={columns}
        dataSource={dataSource}
        selection={{ onChange: this.onSelectChange }}
        pagination={{
          pageSize: this.state.pageSize,
          current: this.state.currentPage,
          onChange: this.handleNextPage, // 更改页码事件
        }}
      />
      // 可能还需要添加一个按钮来触发全选/反选操作
      <Button onClick={() => this.toggleAllSelection()} type="primary">
        {selectedRows.length ? '反选' : '全选'}
      </Button>
    );
  }

  toggleAllSelection = () => {
    const allSelected = !this.state.selectedRows.length;
    this.setState(prevState => ({
      selectedRows: allSelected ? [...yourData.map(item => item.key)] : [],
    }));
  };
}

export default MultiPageTable;