Antd 中如何实现可滚动表格，并使其高度自适应？-css教程-PHP中文网

Antd 中如何实现可滚动表格，并使其高度自适应？

心靈之曲

发布： 2024-11-10 21:51:21

原创

1327人浏览过

antd 中如何实现可滚动表格，并使其高度自适应？

antd 中用于展示可滚动内容的组件

在开发中，当内容较多时，页面会隐藏下方的部分。为了解决这个问题，ant design (antd) 提供了多种组件，可以进行包容所有的内容，并在内容溢出时实现滚动。

card 与 table 的结合

在 antd 中，可以将 card 组件与 table 组件结合使用，实现内容溢出时的滚动效果。card 组件用于包裹 table 组件，并设置 height 和 overflow 属性，使其在内容溢出时能够滚动。例如：

import react from 'react';
import { card, table } from 'antd';

const columns = [
  // 表格列的配置
];

const data = [
  // 表格数据的配置
];

const scrollabletable = () => {
  return (
    <card style={{ height: '400px', overflow: 'auto' }}>
      <table
        columns={columns}
        datasource={data}
        pagination={{ pagesize: 50 }}
        scroll={{ y: 300 }}
      />
    </card>
  );
};

export default scrollabletable;

登录后复制

样式调整

可以根据需要进一步调整样式，以适应具体的需求。上述代码示例设置了表格的高度为300px，可以根据实际情况进行调整。通过使用 card 组件包裹 table 组件，并设置适当的样式，可以实现内容溢出时的滚动效果。

百度文心百中

百度大模型语义搜索体验中心

查看详情

使用 flex 布局自适应高度

要让 card 组件根据其父容器的高度进行自适应，而不是固定高度，可以使用 css 的 flex 布局来实现。您可以将 height: '400px' 替换为 height: '100%'，并在 css 中设置 flex 布局属性：

import react from 'react';
import { card, table } from 'antd';
import './scrollabletable.css'; // 引入自定义的css

const columns = [
  // 表格列的配置
];

const data = [
  // 表格数据的配置
];

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%;
  display: flex;
  flex-direction: column;
}

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

登录后复制

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

以上就是Antd 中如何实现可滚动表格，并使其高度自适应？的详细内容，更多请关注php中文网其它相关文章！