要实现全选时选择所有数据,而不仅仅是当前页的数据,可以使用 rowSelectiononChange 属性来处理全选逻辑。以下是一个示例代码:

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

const dataSource = [
  {
    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: "Jim Red",
    age: 32,
    address: "London No. 2 Lake Park",
  },
];

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

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

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

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

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

export default App;

在这个示例中,我们使用 useState 来定义一个 selectedRowKeys 的状态来存储选择的行的 key 值。然后,我们定义了一个 onSelectChange 函数来更新 selectedRowKeys 状态。最后,我们将 selectedRowKeysonSelectChange 分别传递给 rowSelectionselectedRowKeysonChange 属性。

这样,当你点击全选时,onSelectChange 函数会被调用,将所有行的 key 值存储在 selectedRowKeys 状态中,实现了全选功能

antd table设置rowSelection selections全选以后仍然只选择了当页的数据

原文地址: https://www.cveoy.top/t/topic/hMeK 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录