react实现全选反选，获取已选中的数据，点击按钮获取到当前列表数据（antd组件）

1、引入组件

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

2、写列表数据

const data = [
  {
    key: '1',
    name: 'John Doe',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jane Smith',
    age: 28,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Sam Green',
    age: 45,
    address: 'Sidney No. 1 Lake Park',
  },
];
 
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Action',
    key: 'action',
    render: (_: any, record: any) => (
      <Button onClick={() => handleButtonClick(record)}>
        View Details
      </Button>
    ),
  },
];

3、写html

 return (
    <div>
      <Table
        rowSelection={
  
  {
          ...rowSelection,
          onSelectAll, // 处理表头复选框
        }}
        columns={columns}
        dataSource={data}
        rowKey="key" // 为每一行指定唯一的 key
      />
      <Button onClick={getSelectedRowsData} style={
  
  { marginTop: 16 }}>
        打印已选中的数据
      </Button>
    </div>
  );

4、添加点击事件和全选反选

const handleButtonClick = (record: { name: any; age: any; address: any; }) => {
  // 处理按钮点击事件，显示当前行的详细信息
  message.info(`Viewing details for: ${record.name}, Age: ${record.age}, Address: ${record.address}`);
  console.log(record); // 打印当前行数据
};
const MyTable = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 
  // 获取已选中的行数据
  const getSelectedRowsData = () => {
    const selectedRows = data.filter(item => selectedRowKeys.includes(item.key));
    console.log('已选中的数据:', selectedRows);
    message.info('查看控制台打印的已选数据');
  };
 
  // rowSelection 配置
  const rowSelection = {
    selectedRowKeys, // 选中的行 key 数组
    onChange: (selectedKeys: React.SetStateAction<never[]>) => {
      setSelectedRowKeys(selectedKeys); // 更新选中的行 key
    },
    getCheckboxProps: (record: any) => ({
      disabled: false, // 这里可以控制每一行复选框是否可选
    }),
  };
 
  const onSelectAll = (selected: any, selectedRows: any, changeRows: any) => {
    // 选中所有行时更新 selectedRowKeys
    const selectedKeys = selected ? data.map((item) => item.key) : [];
    setSelectedRowKeys(selectedKeys);
  };

key是必须的，确保数据的唯一性

全部代码:

import React, { useState } from 'react';
import { Table, Button, message } from 'antd';
 
const data = [
  {
    key: '1',
    name: 'John Doe',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jane Smith',
    age: 28,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Sam Green',
    age: 45,
    address: 'Sidney No. 1 Lake Park',
  },
];
 
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Action',
    key: 'action',
    render: (_: any, record: any) => (
      <Button onClick={() => handleButtonClick(record)}>
        View Details
      </Button>
    ),
  },
];
const handleButtonClick = (record: { name: any; age: any; address: any; }) => {
  // 处理按钮点击事件，显示当前行的详细信息
  message.info(`Viewing details for: ${record.name}, Age: ${record.age}, Address: ${record.address}`);
  console.log(record); // 打印当前行数据
};
const MyTable = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 
  // 获取已选中的行数据
  const getSelectedRowsData = () => {
    const selectedRows = data.filter(item => selectedRowKeys.includes(item.key));
    console.log('已选中的数据:', selectedRows);
    message.info('查看控制台打印的已选数据');
  };
 
  // rowSelection 配置
  const rowSelection = {
    selectedRowKeys, // 选中的行 key 数组
    onChange: (selectedKeys: React.SetStateAction<never[]>) => {
      setSelectedRowKeys(selectedKeys); // 更新选中的行 key
    },
    getCheckboxProps: (record: any) => ({
      disabled: false, // 这里可以控制每一行复选框是否可选
    }),
  };
 
  const onSelectAll = (selected: any, selectedRows: any, changeRows: any) => {
    // 选中所有行时更新 selectedRowKeys
    const selectedKeys = selected ? data.map((item) => item.key) : [];
    setSelectedRowKeys(selectedKeys);
  };
 
  return (
    <div>
      <Table
        rowSelection={
  
  {
          ...rowSelection,
          onSelectAll, // 处理表头复选框
        }}
        columns={columns}
        dataSource={data}
        rowKey="key" // 为每一行指定唯一的 key
      />
      <Button onClick={getSelectedRowsData} style={
  
  { marginTop: 16 }}>
        打印已选中的数据
      </Button>
    </div>
  );
};
 
export default MyTable;