antd Table 自适应滚动

原创于 2021-08-11 15:53:43 发布 · 5.6k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#antd #table #自适应

Web前端同时被 2 个专栏收录

40 篇文章

订阅专栏

antd

7 篇文章

订阅专栏

本文探讨了在antd中Table组件实现自适应滚动的问题。当需要表头固定且内容区域滚动时，通常需要设置固定的scroll属性。然而，需求是让Table高度根据父div动态调整，当内容超出父div高度时，内部自动触发滚动效果。文章提供了相应的解决方案。

antd Table 自适应滚动

问题：

antd的Table想要表头固定内容部分滚动的话必须给scroll设置固定值
如：

<Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />

需清楚地指明300or calc(100vh - 30px)，而我需要Table高度自适应父div的高度
即父元素div的高度初始化时是不定的，Table超出该div的高度时，内部自动发生滚动

解决：

const [scrollY, setScrollY] = useState('');

 useEffect(() => {
  const Y = document.getElementById('table')?.clientHeight;
  if (Y) setScrollY(`${Y - 32}px`); // 32为表头的高，应用时减去自己表格的表头高
}, []);
  
<div id="table">
  <Table columns={columns} dataSource={data} scroll={{ y: scrollY }} />
<div>