我的项目须要一个满屏的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>