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 ( 样式调整
可以根据需要进一步调整样式，以适应具体的需求。上述代码示例设置了表格的高度为300px，可以根据实际情况进行调整。通过使用 card 组件包裹 table 组件，并设置适当的样式，可以实现内容溢出时的滚动效果。
科威旅游管理系统源码
系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。
150 查看详情
使用 flex 布局自适应高度
要让 card 组件根据其父容器的高度进行自适应，而不是固定高度，可以使用 css 的 flex 布局来实现。您可以将 height: ‘400px’ 替换为 height: ‘100%’，并在 css 中设置 flex 布局属性：
import react from 'react';import { card, table } from 'antd';import './scrollabletable.css'; // 引入自定义的cssconst columns = [ // 表格列的配置];const data = [ // 表格数据的配置];const scrollabletable = () => { return (
);};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 中如何实现可滚动表格，并使其高度自适应？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1156070.html
微信扫一扫 
支付宝扫一扫 
