动态高度
const [searchHeight, setSearchHeight] = useState(0);
const [collapsed, setCollapsed] = useState(true);
useEffect(() => {
const handleResize = () => {
// 使用 setTimeout 延迟执行获取高度的操作
setTimeout(() => {
const cardElement = document.querySelector('.ant-pro-table-search');
if (cardElement) {
const { height } = cardElement.getBoundingClientRect();
setSearchHeight(height); // 修改这里
}
}, 0);
};
// 初次加载时获取一次
handleResize();
}, [collapsed]);
const scroll = { y: `calc(100vh - (${searchHeight}px + 350px))` }
const pagination = {
size: "default",
defaultPageSize: 10,
showSizeChanger: true,
}
const search = {
span: 8,
collapsed: collapsed, // 状态可控
labelWidth: 'auto',
onCollapse: (value) => { // 通过方法手动修改状态
setCollapsed(value)
},
defaultCollapsed: true,
}
const ref = useRef();
<ProTable
formRef={formRef}
columns={columns}
actionRef={actionRef}
pagination={pagination}
toolBarRender={() => []}
search={false}
request={(r) => fetchTableData(r, id, form)}
scroll={scroll}
/>