antd react 虚拟列表怎么固定表头

antd 的虚拟列表组件是 `List`，而不是 `Table`，它不支持固定表头。不过，你可以自己实现一个带有固定表头的虚拟列表组件。具体实现方法如下：

1. 使用 `List` 组件渲染数据，并设置 `itemCount` 和 `itemSize` 属性，分别表示数据项的总数和每个数据项的高度。

import { List } from 'antd';

function VirtualTable({ columns, dataSource, height }) {
  const itemSize = 50;  // 每个数据项的高度
  const itemCount = dataSource.length;  // 数据项的总数

  return (
    <List
      className="virtual-table"
      itemLayout="horizontal"
      dataSource={dataSource}
      renderItem={(item, index) => (
        <List.Item>
          <List.Item.Meta
            title={item.name}
            description={item.age}
          />
          {/* 其他列 */}
        </List.Item>
      )}
      height={height}
      itemSize={itemSize}
      itemCount={itemCount}
    />
  );
}

2. 在列表的外层包裹一个 `div` 元素，设置该元素的宽度和高度，并设置 `overflow: auto`，使其出现滚动条。

function VirtualTable({ columns, dataSource, height }) {
  // ...

  return (
    <div className="virtual-table-container" style={{ height: height }}>
      <List
        // ...
      />
    </div>
  );
}

3. 在 `renderItem` 中增加一个固定表头的 `div` 元素，设置该元素的宽度和高度，并设置 `position: sticky`，使其跟随滚动条滚动时固定在顶部。

function VirtualTable({ columns, dataSource, height }) {
  // ...

  return (
    <div className="virtual-table-container" style={{ height: height }}>
      <div className="virtual-table-header">
        <List.Item>
          {columns.map((column, index) => (
            <List.Item.Meta
              key={index}
              title={column.title}
              description={column.dataIndex}
              style={{ width: column.width }}
            />
          ))}
        </List.Item>
      </div>
      <List
        // ...
      />
    </div>
  );
}

4. 在 CSS 中设置样式，使表头和数据项对齐。

.virtual-table-header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

.virtual-table .ant-list-item-meta-description {
  line-height: 50px; /* 每个数据项的高度 */
}

完整代码如下：

import { List } from 'antd';
import './VirtualTable.css';

function VirtualTable({ columns, dataSource, height }) {
  const itemSize = 50;  // 每个数据项的高度
  const itemCount = dataSource.length;  // 数据项的总数

  return (
    <div className="virtual-table-container" style={{ height: height }}>
      <div className="virtual-table-header">
        <List.Item>
          {columns.map((column, index) => (
            <List.Item.Meta
              key={index}
              title={column.title}
              description={column.dataIndex}
              style={{ width: column.width }}
            />
          ))}
        </List.Item>
      </div>
      <List
        className="virtual-table"
        itemLayout="horizontal"
        dataSource={dataSource}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              title={item.name}
              description={item.age}
            />
            {/* 其他列 */}
          </List.Item>
        )}
        height={height}
        itemSize={itemSize}
        itemCount={itemCount}
      />
    </div>
  );
}

.virtual-table-container {
  width: 100%;
  overflow: auto;
}

.virtual-table-header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

.virtual-table .ant-list-item-meta-description {
  line-height: 50px; /* 每个数据项的高度 */
}