网上常见设置antd table最小宽度的方案:
这种方法也不是不可以,但是若需要动态设置最小高度的话,这样写就不是很合适。
所以这边选择动态计算table高度的方法来实现:
第一步:计算table scroll height
const getTableHeight = () => {
const tHeader = document.querySelector('.ant-table-thead');
// 表格内容距离顶部的距离
let tHeaderBottom = 0;
if (tHeader) {
tHeaderBottom = tHeader.getBoundingClientRect().bottom;
}
// 计算剩余的高度
const innerHeight = window?.innerHeight ?? 0;
const calcHeight = innerHeight - (tHeaderBottom + extraHeight);
// 如果最小高度 > 剩余的高度,则使用最小高度,反之使用剩余的高度
return tableMinHeight && tableMinHeight > calcHeight ? minHeight : `calc(100vh - ${calcHeight}px)`;
};
第二步:设置滚动区域的高
const tableHeight = getTableHeight();
<Table
...
scroll={{y: tableHeight}}
...
/>