如何实现Ant Design Table选中行时表头叠加显示工具栏？

Ant Design设计规范里的批量操作工具栏效果，组件文档没有直接提供封装好的组件，但可以通过状态控制+基础组件组合+CSS定位来实现，具体步骤如下：

1. 核心思路 #

通过Table的rowSelection监听选中行的状态，根据选中行数控制工具栏的显示/隐藏，同时用绝对定位让工具栏叠加在表头上方，避免遮挡表格内容。

2. 具体实现代码 #

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

const BatchOperationTable = () => {
  // 存储选中的行数据
  const [selectedRows, setSelectedRows] = useState([]);

  // 配置行选择逻辑
  const rowSelection = {
    onChange: (_, rows) => {
      setSelectedRows(rows);
    },
  };

  // 表格列示例
  const columns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '年龄', dataIndex: 'age', key: 'age' },
    { title: '地址', dataIndex: 'address', key: 'address' },
  ];

  // 数据源示例
  const dataSource = [
    { key: '1', name: '张三', age: 28, address: '北京市朝阳区' },
    { key: '2', name: '李四', age: 32, address: '上海市黄埔区' },
    { key: '3', name: '王五', age: 24, address: '广州市天河区' },
  ];

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      {/* 批量操作工具栏：选中行时显示 */}
      {selectedRows.length > 0 && (
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          padding: '8px 16px',
          backgroundColor: '#fff',
          borderBottom: '1px solid #f0f0f0',
          zIndex: 10,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <span>已选中 {selectedRows.length} 项</span>
          <Space>
            <Button type="primary">批量删除</Button>
            <Button>批量导出</Button>
          </Space>
        </div>
      )}

      {/* 表格：根据工具栏高度调整上边距，避免内容被遮挡 */}
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={dataSource}
        style={{ marginTop: selectedRows.length > 0 ? '48px' : 0 }}
        pagination={false}
      />
    </div>
  );
};

export default BatchOperationTable;

3. 关键细节优化 #

• 定位逻辑：外层容器设置position: relative，让工具栏的绝对定位基于容器，避免脱离布局流。
• 遮挡处理：表格通过marginTop留出工具栏的高度（示例中是48px，可根据工具栏实际高度调整），保证表头内容不被遮挡。
• 视觉贴合：工具栏的样式参考Ant Design的设计规范，使用和表格一致的边框、背景色，保持风格统一。
• 进阶扩展：如果需要支持表格滚动时工具栏固定，可以将工具栏的position改为sticky，同时调整top值为0。

4. 批量操作逻辑示例 #

以批量删除为例，只需在按钮点击事件中过滤数据源：

const handleBatchDelete = () => {
  const newDataSource = dataSource.filter(item => 
    !selectedRows.some(selected => selected.key === item.key)
  );
  // 更新数据源状态（如果dataSource是用useState管理的）
  // setDataSource(newDataSource);
  // 清空选中状态
  setSelectedRows([]);
};

内容的提问来源于stack exchange，提问作者Pietro