antd table 固定表头
时间: 2023-10-06 12:13:49 浏览: 113
antd-table-dragula:Ant Design Table + Dragula - 行拖放
要固定 Ant Design 的 Table 组件的表头,可以在 Table 组件中设置 `scroll` 属性,并将 `scroll.y` 的值设置为表格的高度,例如:
```jsx
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
fixed: 'left', // 固定列
width: 100, // 列宽度
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 100,
},
// 其他列
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
// 其他数据
},
// 其他数据
];
<Table
columns={columns}
dataSource={data}
scroll={{ y: 240 }} // 表格的高度
/>
```
在这个例子中,我们将 `scroll.y` 的值设置为 `240`,这意味着表格的高度为 `240px`。 `fixed: 'left'` 属性可以将列固定在表格的左边。如果您想固定多个列,请指定每个固定列的宽度,以便表格中的所有列的总宽度不超过表格的宽度。
阅读全文