antd组件库中table组件内容自适应屏幕最大高度设置滚动条

antd组件库中table组件内容自适应屏幕最大高度设置滚动条

需求

在平时项目开发中，使用antd组件库得table组件展示数据，但是由于一页展示的数据太多表格整体高度超出屏幕最大高度，导致整体屏幕出现滚动条，在滚动查看数据的时候表格头部也会随之进行向上滚动体验非常不友好，所以就需要当表格高度超出屏幕高度时根据屏幕的最大高度设置表格内部滚动条。
问题图片如下：

解决方法

参考了这位博主的方法， 因为是在react项目中所以就把他的方法转成了自定义hook的形式，使用起来更加方便。

整体思路：

1、获取当前表格header底部距离屏幕顶部的距离
2、获取底部或者其他距离
3、使用css中calc计算属性获取表格滚动高度
4、使用table组件的scroll.y属性设置获取的滚动高度

代码如下：

export const useTableScroll = (params: {
  extraHeight?: number;
  id?: string;
}) => {
  const [tableSrcollHeight, setTableSrcollHeight] = useState<string>();

  useEffect(() => {
    // extraHeight 其他的高度， 比如底部有无分页，底部边距等等距离，如果底部也是动态的那就要再次计算。
    // id 页面中可能有多个表格的情况
    const { extraHeight = 78, id } = params;

    let tHeader = null;
    if (id)
      tHeader = document.getElementById(id)
        ? document
            .getElementById(id)
            ?.getElementsByClassName('ant-table-thead')[0]
        : null;
    else tHeader = document.getElementsByClassName('ant-table-thead')[0];

    // 获取表格header底部距离屏幕顶部的距离
    const tHeaderBottom = tHeader ? tHeader.getBoundingClientRect().bottom : 0;
    // 使用 calc 属性计算出表格滚动高度
    setTableSrcollHeight(`calc(100vh - ${tHeaderBottom + extraHeight}px)`);
  }, []);

  return tableSrcollHeight;
};

使用：

  const tableSrcollHeight = useTableScroll({ extraHeight: cusExtraHeight });

  <ProTable<any, any>
    scroll={{
      y: tableSrcollHeight,
    }}
  />

解决后效果：