关于javascript:当antd-Table-Head高度不确定动态计算满屏时Table-scroll-y的高度

28次阅读

共计 673 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完