antd 表格固定高度

你可以通过设置表格的高度属性来固定antd表格的高度。例如，你可以在Table组件中添加height属性，如下所示：

<Table
  columns={columns}
  dataSource={data}
  pagination={false}
  height={400} // 设置表格高度为400px
/>

这将使表格的高度固定为400像素。你可以根据需要自行调整高度值。另外，你还可以设置scroll属性来允许用户滚动以查看表格中的内容。例如：

<Table
  columns={columns}
  dataSource={data}
  pagination={false}
  scroll={{ y: 400 }} // 允许纵向滚动，高度为400px
/>

这将允许用户在表格中垂直滚动，但是表格的列标题和表头将保持固定。

相关问题

antd 固定表格高度

要固定 Ant Design 表格的高度，您可以使用 `scroll` 属性。将 `scroll` 属性设置为一个对象，其中包含 `x` 和 `y` 属性，分别表示水平和垂直方向的滚动。要固定表格的高度，可以将 `y` 属性设置为所需的高度，例如：

<Table
  columns={columns}
  dataSource={data}
  scroll={{ y: 400 }}
/>

这将使表格在垂直方向上滚动，并将其高度固定为 400 像素。您可以根据需要进行调整。请注意，当表格中的行数超过指定高度时，它们将自动滚动。

antd表格使用虚拟滚动

Ant Design的表格组件支持虚拟滚动，通过设置 `scroll` 属性来实现。具体实现步骤如下：

1. 设置 `scroll` 属性为一个对象，包含以下属性：

- `x`: 表示表格的宽度（如果不设置，表格会自动根据内容撑开宽度）。
- `y`: 表示表格的高度，当表格内容超出这个高度时，会出现纵向滚动条。
- `scrollbarSize`: 表示滚动条的宽度，默认为 6。
- `virtual`: 开启虚拟滚动，默认为 `false`。

2. 在表格列的 `width` 属性中设置固定宽度，如果不设置，则根据内容自动调整列宽度。

3. 如果表格数据较多，可以通过设置 `rowKey` 属性来提高渲染性能。 `rowKey` 属性需要指定一个唯一的键，例如：

<Table rowKey={record => record.id} />

完整代码示例如下：

import { Table } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 100,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: 100,
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
];

const data = [];
for (let i = 0; i < 10000; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

function App() {
  return (
    <Table
      columns={columns}
      dataSource={data}
      scroll={{ y: 600, scrollbarSize: 6, virtual: true }}
      rowKey={record => record.key}
    />
  );
}

export default App;

上述代码中，表格的高度为 600px，开启了虚拟滚动，并且设置了固定列宽度和唯一键。