当前位置：首页 > React

react-antd实现全选

2026-01-27 16:22:39React

使用 React 和 Ant Design 实现全选功能

实现全选功能的核心是结合 Ant Design 的 Table 和 Checkbox 组件

基础实现方法

准备数据与状态管理 在组件中定义数据源和选中状态：

const [data, setData] = useState([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
]);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);

配置 Table 的 rowSelection 使用 Ant Design Table 的 rowSelection 属性：

const rowSelection = {
  selectedRowKeys,
  onChange: (selectedKeys) => {
    setSelectedRowKeys(selectedKeys);
  },
  getCheckboxProps: (record) => ({
    disabled: record.disabled // 可选：禁用某些行的选择
  })
};

<Table
  rowSelection={rowSelection}
  dataSource={data}
  columns={columns}
  rowKey="id"
/>

添加全选控制按钮 在表格上方添加控制全选的 Checkbox：

const onSelectAll = (e) => {
  if (e.target.checked) {
    setSelectedRowKeys(data.map(item => item.id));
  } else {
    setSelectedRowKeys([]);
  }
};

<Checkbox
  checked={selectedRowKeys.length === data.length}
  indeterminate={selectedRowKeys.length > 0 && selectedRowKeys.length < data.length}
  onChange={onSelectAll}
>
  全选
</Checkbox>

高级实现技巧

分页全选处理 对于分页表格，需要额外处理跨页全选逻辑：

const [allSelectedKeys, setAllSelectedKeys] = useState([]);

const handleSelectAll = (e) => {
  if (e.target.checked) {
    const currentPageKeys = data.map(item => item.id);
    setAllSelectedKeys([...new Set([...allSelectedKeys, ...currentPageKeys])]);
    setSelectedRowKeys(currentPageKeys);
  } else {
    setAllSelectedKeys(allSelectedKeys.filter(key => !data.some(item => item.id === key)));
    setSelectedRowKeys([]);
  }
};

带筛选条件的全选 当表格有筛选条件时，全选应只针对当前筛选结果：

const [filteredData, setFilteredData] = useState(data);

const onSelectAllFiltered = (e) => {
  if (e.target.checked) {
    setSelectedRowKeys(filteredData.map(item => item.id));
  } else {
    setSelectedRowKeys(selectedRowKeys.filter(key => 
      !filteredData.some(item => item.id === key)
    ));
  }
};

性能优化 对于大数据量表格，使用 memoization 优化性能：

const rowSelection = useMemo(() => ({
  selectedRowKeys,
  onChange: setSelectedRowKeys,
  preserveSelectedRowKeys: true
}), [selectedRowKeys]);

完整示例代码

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

const SelectableTable = () => {
  const [data] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]);

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const columns = [
    { title: 'ID', dataIndex: 'id' },
    { title: 'Name', dataIndex: 'name' }
  ];

  const rowSelection = useMemo(() => ({
    selectedRowKeys,
    onChange: setSelectedRowKeys
  }), [selectedRowKeys]);

  const onSelectAll = (e) => {
    if (e.target.checked) {
      setSelectedRowKeys(data.map(item => item.id));
    } else {
      setSelectedRowKeys([]);
    }
  };

  return (
    <div>
      <Checkbox
        checked={selectedRowKeys.length === data.length}
        indeterminate={selectedRowKeys.length > 0 && selectedRowKeys.length < data.length}
        onChange={onSelectAll}
      >
        全选
      </Checkbox>

      <Table
        rowSelection={rowSelection}
        dataSource={data}
        columns={columns}
        rowKey="id"
      />
    </div>
  );
};

export default SelectableTable;