antdesign table 滚动高度自适应

基于react + antd 项目框架开发的管理端列表页，通常需要根据浏览器窗口动态设置表格列表出现滚动条的最大高度scroll.y属性进行浏览器适配。

通用方法：

/**
  * 获取第一个表格的可视化高度
  * @param {*} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为74) 
  * @param {*} id 当前页面中有多个table时需要制定table的id
  */
export const getTableScroll = (params: { extraHeight?: number, id?: string }) => {
  let extraHeight = params?.extraHeight;
  if (typeof extraHeight == "undefined") {
    //  默认底部边距20
    extraHeight = 0;
  }
  let tHeader = null
  if (params?.id) {
    const { id } = params;
    tHeader = document.getElementById(id) ? document.getElementById(id).getElementsByClassName("ant-table-thead")[0] : null
  } else {
    tHeader = document.getElementsByClassName("ant-table-thead")[0];
  }
  //表格内容距离顶部的距离
  let tHeaderBottom = 0;
  if (tHeader) {
    tHeaderBottom = tHeader.getBoundingClientRect().bottom;
  }

  //窗体高度-表格内容顶部的高度-表格内容底部的高度
  let height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`;
  return height;
}

table 组件：

const TableCom: React.FC<TableProps> = (props) => {

  const { dataSource, columns, loading, extraHeight, ...otherprops } = props;

  // 表格滚动高度
  const [scrollY, setScrollY] = useState<any>();

  useEffect(() => {
    const calcScrollY = getTableScroll({ extraHeight: extraHeight || 20 });
    setScrollY(calcScrollY);
  }, []);

  return (
    <div className={styles.table}>
      <Table
        className={styles.tableClass}
        dataSource={dataSource}
        columns={columns}
        scroll={{ y: scrollY }}
        loading={loading}
        {...otherprops}
      />
    </div>
  )
}
export default TableCom;

需要注意：

1.需要固定表格父容器的总高度

.table {
  width: 100%;
  height: 100%;
  position: relative;

  .tableClass {
    height: 100%;
  }
}