在开发的时候，发现内容比较多的时候就隐藏了下面的部分。请问一下：antd中是否有哪个组件可以进行包容所有的内容，展示不出的时候就可以滚动？

antd中是否有哪个组件可以进行包容所有的内容，展示不出的时候就可以滚动？

2 个回答

得票最新

周周架构师

29223

发布于
2024-06-04 江苏

更新于
2024-06-05

✓ 已被采纳

在Ant Design (Antd) 中，可以使用 Card 组件与 Table 组件结合，并配合 CSS 来实现当内容溢出时可以滚动的效果。以下是一个示例：

import React from 'react';
import { Card, Table } from 'antd';

const columns = [
  { title: 'id', dataIndex: 'id', key: 'id' },
  { title: '项目名', dataIndex: 'name', key: 'name' },
  { title: '项目描述', dataIndex: 'description', key: 'description' },
  { title: '位置', dataIndex: 'location', key: 'location' },
  { title: '是否选中', dataIndex: 'selected', key: 'selected' },
  { title: '创建时间', dataIndex: 'createdTime', key: 'createdTime' },
  { title: '更新时间', dataIndex: 'updatedTime', key: 'updatedTime' },
  { title: '操作', dataIndex: 'actions', key: 'actions' },
];

const data = [
  { id: 1, name: 'string', description: 'string', location: 'string', selected: '否', createdTime: '时间', updatedTime: '时间', actions: '选择 删除' },
  { id: 2, name: 'string', description: 'string', location: 'string', selected: '否', createdTime: '时间', updatedTime: '时间', actions: '选择 删除' },
  // 添加更多数据以测试滚动效果
];

const ScrollableTable = () => {
  return (
    <Card style={{ height: '400px', overflow: 'auto' }}>
      <Table 
        columns={columns} 
        dataSource={data} 
        pagination={{ pageSize: 50 }} // 设置分页
        scroll={{ y: 300 }} // 设置表格高度以允许滚动
      />
    </Card>
  );
};

export default ScrollableTable;

解释
Card 组件：使用 Card 组件包裹 Table 组件，并设置 height 和 overflow 属性，使其在内容溢出时能够滚动。
Table 组件：
columns：定义表格的列。
dataSource：提供表格的数据源。
pagination：设置分页，每页显示50条数据。
scroll：设置表格的滚动高度。
样式调整
可以根据需要进一步调整样式，以适应具体的需求。上述代码示例设置了表格的高度为300px，可以根据实际情况进行调整。通过使用 Card 组件包裹 Table 组件，并设置适当的样式，可以实现内容溢出时的滚动效果。

要让 <Card> 组件根据其父容器的高度进行自适应，而不是固定高度，可以使用 CSS 的 flex 布局来实现。您可以将 height: '400px' 替换为 height: '100%'，然后确保父容器的高度也已正确设置。

1.确保父容器具有适当的高度和 display: flex 属性，以便子元素可以填充父容器的高度。
2.在 <Card> 和 <Table> 组件上设置 height: '100%'，使其高度根据父容器的高度自适应。

import React from 'react';
import { Card, Table } from 'antd';
import './ScrollableTable.css'; // 引入自定义的CSS

const columns = [
  { title: 'id', dataIndex: 'id', key: 'id' },
  { title: '项目名', dataIndex: 'name', key: 'name' },
  { title: '项目描述', dataIndex: 'description', key: 'description' },
  { title: '位置', dataIndex: 'location', key: 'location' },
  { title: '是否选中', dataIndex: 'selected', key: 'selected' },
  { title: '创建时间', dataIndex: 'createdTime', key: 'createdTime' },
  { title: '更新时间', dataIndex: 'updatedTime', key: 'updatedTime' },
  { title: '操作', dataIndex: 'actions', key: 'actions' },
];

const data = [
  { id: 1, name: 'string', description: 'string', location: 'string', selected: '否', createdTime: '时间', updatedTime: '时间', actions: '选择 删除' },
  { id: 2, name: 'string', description: 'string', location: 'string', selected: '否', createdTime: '时间', updatedTime: '时间', actions: '选择 删除' },
  // 添加更多数据以测试滚动效果
];

const ScrollableTable = () => {
  return (
    <div className="container">
      <Card className="card">
        <Table 
          columns={columns} 
          dataSource={data} 
          pagination={{ pageSize: 50 }} // 设置分页
          scroll={{ y: '100%' }} // 设置表格高度以允许滚动
        />
      </Card>
    </div>
  );
};

export default ScrollableTable;

然后，在 ScrollableTable.css 文件中定义样式：

/* ScrollableTable.css */
.container {
  height: 100vh; /* 父容器的高度 */
  display: flex;
  flex-direction: column;
}

.card {
  height: 100%; /* 让Card填充父容器 */
  display: flex;
  flex-direction: column;
}

.card .ant-table-wrapper {
  flex: 1;
}

通过以上修改，<Card> 组件将根据父容器的高度自适应，并且表格内容可以滚动显示。这样就可以避免使用固定高度，并确保布局在不同屏幕尺寸下的自适应性。