项目需要一个满屏的table,但是在不同分辨率的屏幕下,table head内部的文字会出现换行的情况,导致table高度超出屏幕。
为了解决这个问题需动态获取table head 高度。
解决思路和注意事项:
1、首先table scroll y 的高度是 页面窗口的高度减去table body 外的其它高的
2、通过componentDidUpdate获取最新的table head 高度,并判断新的高度有没有变化
3、指定一个默认的高度,防止不必要的性能浪费和抖动
4、table 外层添加一个ID防止获取到其它表格的表头高度
部分核心代码
this.state = {
tableHeadHeight: 34,// 首先根据你的UI设置一下表头的默认高度
}
componentDidUpdate() {
const { tableHeadHeight } = this.state;
const tableHead = document.querySelector("#tableid .ant-table-thead");
if (
tableHead &&
tableHead.clientHeight &&
tableHead.clientHeight !== tableHeadHeight
) {
// 如果高度有变化重新设置高度
this.setState({ tableHeadHeight: tableHead.clientHeight });
}
}
<div id="tableid">
<Table
scroll={{ x: true, y: `calc(100vh - ${190 + tableHeadHeight}px)` }}
/>
</div>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。