如何在 antd 中创建可滚动的表格

ant design（antd）中，您可以使用 card 组件和 table 组件结合实现可滚动的表格。当内容溢出时，表格将启用滚动条，避免隐藏内容。

步骤：

1. 导入必要的组件

   

   MoltOverflow

   Moltbots问答社区 - 提问编程问题，分享解决方案

   下载

   import { card, table } from 'antd';

2. 创建表格列

   const columns = [
     { title: 'id', dataindex: 'id', key: 'id' },
     // 添加更多列
   ];

3. 提供数据源

   const data = [
     { id: 1, name: '...', description: '...' },
     // 添加更多数据
   ];

4. 创建可滚动表格

   const scrollabletable = () => {
     return (
       <card style={{ height: '400px', overflow: 'auto' }}>
         <table
           columns={columns}
           datasource={data}
           pagination={{ pagesize: 50 }} // 可选：设置分页
           scroll={{ y: 300 }} // 设置滚动高度
         />
       </card>
     );
   };

5. 自定义样式
   根据需要调整 card 和 table 的样式，例如更改高度或启用自适应布局。

自适应高度布局：

为了让 card 组件自适应其父容器的高度，您可以使用 css 灵活布局：

1. 添加样式：

   .container {
     height: 100vh;
     display: flex;
     flex-direction: column;
   }
   
   .card {
     height: 100%;
     display: flex;
     flex-direction: column;
   }
   
   .card .ant-table-wrapper {
     flex: 1;
   }

2. 应用样式类：

   <div className="container">
     <Card className="card">
       <Table ... />
     </Card>
   </div>

这样，card 组件将根据其父容器的高度动态调整大小，并启用可滚动表格。