如何在 antd 中创建可滚动的表格
ant design（antd）中，您可以使用 card 组件和 table 组件结合实现可滚动的表格。当内容溢出时，表格将启用滚动条，避免隐藏内容。
步骤：
-
导入必要的组件
import { card, table } from 'antd'; -
创建表格列
const columns = [ { title: 'id', dataindex: 'id', key: 'id' }, // 添加更多列 ]; -
提供数据源
const data = [ { id: 1, name: '...', description: '...' }, // 添加更多数据 ]; -
创建可滚动表格
const scrollabletable = () => { return ( -
自定义样式
根据需要调整 card 和 table 的样式，例如更改高度或启用自适应布局。
自适应高度布局：
为了让 card 组件自适应其父容器的高度，您可以使用 css 灵活布局：
-
添加样式：
.container { height: 100vh; display: flex; flex-direction: column; } .card { height: 100%; display: flex; flex-direction: column; } .card .ant-table-wrapper { flex: 1; } -
应用样式类：
这样，card 组件将根据其父容器的高度动态调整大小，并启用可滚动表格。
