antd react 固定表头
时间: 2023-07-01 15:18:32 浏览: 160
antd+react+vite+redux的简单例子
要在 Ant Design 的表格中固定表头,可以使用表格组件的 `scroll` 属性。具体操作如下:
```jsx
import { Table } from 'antd';
const dataSource = [
// 数据源
];
const columns = [
// 列配置
];
const ExampleTable = () => {
return (
<Table
dataSource={dataSource}
columns={columns}
scroll={{ y: 300 }} // 设置 y 轴滚动高度
/>
);
};
export default ExampleTable;
```
其中,`scroll` 属性中的 `y` 值表示表格在纵向上可滚动的最大高度。当表格内容超过该高度时,表头会固定在表格顶部,不随滚动而消失。如果不想设置最大高度,可以将 `y` 的值设为 `true`,表示表格在纵向上可滚动。
需要注意的是,固定表头需要同时设置表头和表格的宽度,以便能够正确地对齐。如果不设置宽度,表头和表格可能会出现错位的情况。可以在列的 `width` 属性中设置每一列的宽度,或者在 `scroll` 属性中设置整个表格的宽度。
阅读全文