antd表格跨页勾选

在 antd 的 Table 组件中，如果需要实现表格跨页勾选的功能，可以通过 rowSelection 的 onSelect、onSelectAll 事件来实现。具体步骤如下：

1. 在 Table 组件中设置 rowSelection 属性，并设置 selectedRowKeys 和 onChange 属性。

2. 在 onChange 事件中，将选中的行的 key 值存储到一个数组中。

3. 在 onSelect、onSelectAll 事件中，将选中的行的 key 值存储到一个数组中，并将该数组与 onChange 事件中的数组合并。

4. 在 render 方法中，通过判断当前行的 key 值是否在选中的 key 数组中来设置该行是否被选中。

下面是一个示例代码：

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

const data = [
 {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sidney No. 1 Lake Park',
    disabled: true,
  },
];

const App = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

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

  const onSelect = (record, selected) => {
    const keys = selectedRowKeys.slice();
    if (selected) {
      keys.push(record.key);
    } else {
      const index = keys.indexOf(record.key);
      if (index > -1) {
        keys.splice(index, 1);
      }
    }
    setSelectedRowKeys(keys);
  };

  const onSelectAll = (selected, selectedRows, changeRows) => {
    const keys = selectedRowKeys.slice();
    if (selected) {
      changeRows.forEach((record) => {
        keys.push(record.key);
      });
    } else {
      changeRows.forEach((record) => {
        const index = keys.indexOf(record.key);
        if (index > -1) {
          keys.splice(index, 1);
        }
      });
    }
    setSelectedRowKeys(keys);
  };

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

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];

  return (
    <Table
      rowSelection={rowSelection}
      columns={columns}
      dataSource={data}
      pagination={{ pageSize: 2 }}
    />
  );
};

export default App;