antd table minHeight

news2025/1/13 10:06:11

网上常见设置antd table最小宽度的方案:
antd table minHeight
这种方法也不是不可以,但是若需要动态设置最小高度的话,这样写就不是很合适。

所以这边选择动态计算table高度的方法来实现:

第一步:计算table scroll height

const getTableHeight = () => {
    const tHeader = document.querySelector('.ant-table-thead');
    // 表格内容距离顶部的距离
    let tHeaderBottom = 0;
    if (tHeader) {
      tHeaderBottom = tHeader.getBoundingClientRect().bottom;
    }
    // 计算剩余的高度
    const innerHeight = window?.innerHeight ?? 0;
    const calcHeight = innerHeight - (tHeaderBottom + extraHeight);
    // 如果最小高度 > 剩余的高度,则使用最小高度,反之使用剩余的高度
    return tableMinHeight && tableMinHeight > calcHeight ? minHeight : `calc(100vh - ${calcHeight}px)`;
  };

第二步:设置滚动区域的高

const tableHeight = getTableHeight();
<Table
  ...
  scroll={{y: tableHeight}}
  ...
/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/944978.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

「CSS|前端开发|页面布局」03 开发网站所需要知道的CSS:如何实现你想要的页面布局

本文主要介绍如何分析页面布局&#xff0c;了解HTML标签元素的默认布局以及如何修改标签元素的布局方式&#xff0c;最终能够结合CSS框架实现任意我们看到或者想到的页面布局。 文章目录 本系列前文传送门一、场景说明二、页面布局设计逻辑三、CSS布局编写逻辑HTML元素的默认布…

【附安装包】CorelCAD2023安装教程

软件下载 软件&#xff1a;CorelCAD版本&#xff1a;2023语言&#xff1a;简体中文大小&#xff1a;534.17M安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.0GHz 内存4G(或更高&#xff09;下载通道①百度网盘丨64位下载链接&#xff1a;https://pan.bai…

证券型代币成为新焦点!交易上链,合规也要上链?

“数字化正在使传统行业的边界变得模糊&#xff0c;这是一场真正的金融革命。”麦肯锡早在2017年的《在没有边界的世界中竞争》报告中就以此形容了数字化浪潮。随着对虚拟资产的全球接受度增加&#xff0c;监管机构也开始对其潜力展开讨论。 当代币被视为金融工具时&#xff0c…

java对时间序列每x秒进行分组

问题&#xff1a;将一个时间序列每5秒分一组&#xff0c;返回嵌套的list&#xff1b; 原理&#xff1a;int除int会得到一个int&#xff08;也就是损失精度&#xff09; 输入&#xff1a;排序后的list&#xff0c;每几秒分组值 private static List<List<Long>> get…

Yolov8-pose关键点检测:模型轻量化创新 | PConv结合c2f | CVPR2023 FasterNet

💡💡💡本文解决什么问题:新的partial convolution(PConv),通过同时减少冗余计算和内存访问可以更有效地提取空间特征。 PConv| GFLOPs从9.6降低至8.5,参数量从6482kb降低至6134kb, mAP50从0.921提升至0.925 Yolov8-Pose关键点检测专栏介绍:https://blog.csdn.n…

Centos7.9安装ElasticSearch6

ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口,同时也可以作为一个近实时的数据存储系统。接下来我们快速安装一个集群模式的ES. ## 1.安装JDK1.8 mv jdk-8u301-linux-x64.tar.gz /usr/local/ cd /usr/local/ …

深度学习——感受野以及与图像修复的问题

在CNN中&#xff0c;决定某一层输出结果中一个元素所对应的输入层的区域大小被称作感受野&#xff08;receptive field&#xff09;&#xff0c;指的是神经网络中一个神经元可以感知到的区域&#xff0c;在CNN中&#xff0c;即 上某个元素的计算受输入图像上影响的区域&#xf…

错误代码0x80131500要怎么解决?快速修复方法

错误代码0x80131500通常与.NET Framework 相关的问题有关。它可能表示.NET Framework的安装损坏、版本冲突或系统文件缺失等。下面我们一起来探讨一下解决错误代码0x80131500有哪些。 以下是一些解决方法 安装最新的.NET Framework版本&#xff1a;访问Microsoft官方网站&…

java ReentrantLock 锁 await、signal的用法

背景 在并发编程中&#xff0c;为了保证线程的原子执行&#xff0c;需要使用锁&#xff0c;jvm 内 可以使用 synchronized 和 ReentrantLock&#xff0c;如果是集群部署&#xff0c;我们可以使用Redis 分布式锁 其他的锁后面再介绍。 ReentrantLock 和 synchronized 1、Reent…

【93】PCI Expansion ROM

1、Expansion ROM PCIe、PCI设备可以提供Expansion ROM&#xff0c;Expansion ROM中存在设备初始化或者system boot的code。SystemBIOS在POST&#xff08;Power-on Self Test&#xff09;阶段&#xff0c;会枚举PCI设备&#xff0c;并判断有设备是否支持Expansion ROM&#xff…

贝锐蒲公英异地组网路由器如何设置虚拟串口功能?

蒲公英虚拟串口功能&#xff0c;可实现智能组网内的其它成员异地调试此串口&#xff0c;无需到现场进行调试&#xff0c;为企业降低运营成本、便捷掌控设备数据。 1. 蒲公英硬件设置串口 进入蒲公英云管理平台&#xff0c;点击【工业应用】->【串口设置】&#xff0c;开启…

23款奔驰S400商务型升级裸眼3D仪表盘,体验高配乐趣

3D驾驶员显示屏能帮助您密切留意该显示屏中的重要信息。驾驶辅助系统的警告图标和功能图标都有醒目的3D效果&#xff0c;能够立即引起驾驶员的注意。不仅如此&#xff0c;显示屏还能以出色的 3D 影像来显示车辆前方的汽车、卡车、客车和摩托车等车辆。

Spring Cloud Foundry上使用通配符模式匹配进行的安全绕过漏洞 CVE-2023-20873

文章目录 0.前言1.参考文档2.基础介绍描述如果满足以下任一条件&#xff0c;应用程序就不会有太大风险&#xff1a;受影响的Spring产品和版本 3.解决方案3.1. 升级版本3.2. 替代方案 0.前言 背景&#xff1a;公司项目扫描到 Spring Cloud Foundry上使用通配符模式匹配进行的安全…

Spring——Spring Boot基础

文章目录 第一个helloword项目新建 Spring Boot 项目Spring Boot 项目结构分析SpringBootApplication 注解分析新建一个 Controller大功告成,运行项目 简而言之&#xff0c;从本质上来说&#xff0c;Spring Boot 就是 Spring&#xff0c;它做了那些没有它你自己也会去做的 Spri…

博流RISC-V芯片BL616开发环境搭建

文章目录 1、工具安装2、代码下载3、环境变量配置4、下载交叉编译器5、编译与下载运行6、使用ninja编译 本文分别介绍博流RISC-V芯片 BL616 在 Windows和Linux 下开发环境搭建&#xff0c;本文同时适用BL618&#xff0c;BL602&#xff0c;BL702&#xff0c;BL808系列芯片。 1、…

Viobot输出数据说明

一.原始数据 1.ROS话题 1)相机原始图像数据 Type: sensor_msgs::Image Topic: 左目&#xff1a;/image_left 右目&#xff1a;/image_right 2&#xff09;imu数据 Type: sensor_msgs::Imu Topic: /imu 3&#xff09;TOF数据 点云数据&#xff1a; Type: sensor_msgs::P…

DP读书:鲲鹏处理器 架构与编程(十三)操作系统内核与云基础软件

操作系统内核与云基础软件 鲲鹏软件构成硬件特定软件 鲲鹏软件构成硬件特定软件1. Boot Loader2. SBSA 与 SBBR3. UEFI4. ACPI 操作系统内核Linux系统调用Linux进程调度Linux内存管理Linux虚拟文件系统Linux网络子系统Linux进程间通信Linux可加载内核模块Linux设备驱动程序Linu…

警惕!10本“On Hold”期刊已被踢,仍有12本期刊被标记!

目录更新&#xff1a;2023年8月SCI、SSCI、ESCI期刊 2023年8月21日&#xff0c;科睿唯安更新了WOS期刊目录&#xff0c;此次8月更新中&#xff0c;有24本期刊发生更名或被剔除&#xff0c;其中有10本期刊曾被标记为“On Hold”状态&#xff0c;现已被踢出SCIE/ESCI数据库&…

C语言网络编程实现广播

1.概念 如果同时发给局域网中的所有主机&#xff0c;称为广播 我们可以使用命令查看我们Linux下当前的广播地址&#xff1a;ifconfig 2.广播地址 以192.168.1.0 (255.255.255.0) 网段为例&#xff0c;最大的主机地址192.168.1.255代表该网段的广播地址&#xff08;具体以ifcon…

wmv格式转换成mp4怎么转?分享一种简单好用转换方法

WMV格式和MP4格式是两种常见的视频格式。WMV格式通常是Windows Media Player默认的格式。虽然在Windows上播放WMV文件很容易&#xff0c;但是在其他平台上可能会遇到兼容性问题。另一方面&#xff0c;MP4格式是一种通用的视频格式&#xff0c;几乎可以在所有设备上播放&#xf…