table,scroll的最终方案

最新推荐文章于 2025-03-13 14:59:12 发布

糖小宝2016

最新推荐文章于 2025-03-13 14:59:12 发布

阅读量206

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/tangxiaobao2016/article/details/137599259

版权

本文介绍了如何在React组件中使用useEffect和useStatehooks来动态计算表格的滚动高度，特别是在.ts文件中，针对可能出现的多个表格和底部动态高度情况提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意，你要再.ts文件中使用useEffect , useState，你得用use开头命名；

import { useEffect , useState } from 'react';

  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;
  };

在组件中使用:.tsx结尾

    const tableSrcollHeight = useTableScroll({ extraHeight: 260 });
      <ProTable
       scroll={{
                x:'1200px',
                y: tableSrcollHeight
              }}
	 />