antd table 表格滚动条固定在底部
时间: 2023-12-28 11:03:22 浏览: 66
要使 antd 的表格滚动条固定在底部,可以设置 `scroll={{ y: 'calc(100vh - 300px)' }}`,其中 `100vh` 是视口高度,`300px` 是表格头和底部分页器的高度之和。
具体实现如下:
```jsx
import React from 'react';
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'Mike',
age: 32,
address: '10 Downing Street',
},
{
key: '2',
name: 'John',
age: 42,
address: '10 Downing Street',
},
// ...
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
// ...
];
const App = () => {
return (
<div style={{ height: '100vh' }}>
<Table
dataSource={dataSource}
columns={columns}
pagination={false}
scroll={{ y: 'calc(100vh - 300px)' }}
/>
</div>
);
};
export default App;
```
上面的代码将会使表格的纵向滚动条固定在距离视口底部 `300px` 的位置。你可以根据实际需求来调整这个值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)