react+antd动态设置table最大滚动高度

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

场景,无论页面中添加多少元素,始终让table的高度自适应,这样在table设置了最大高度的情况,页面不用再出现多条滚动条。

  // 计算table最大高度
export function getTableMaxH (tableEl,callback) {
    var paginationH=24+32 //24是页码的高度 32是页码上下的边距,这里直接写死,也可进行js获取
    const setH=()=>{
      const appMainBox=document.querySelector('#appMainBox').getBoundingClientRect()
      const table=document.querySelector(tableEl).getBoundingClientRect()
      const res=appMainBox.height-table.top-paginationH
    //   console.log('paginationH',appMainBox.height,table.height,paginationH,res)
      callback(res)
    }
    setH()
    window.onresize=function(){
      setH()
    }
  }
this.state = {
            TableMaxH:300 //默认
        }
// 使用
 componentDidMount() {
        this.fetchTableData();
        getTableMaxH('#table',res=>{
            this.setState({
                TableMaxH:res
            })
        })
    }
<Table columns={columns} scroll={{ y:this.state.TableMaxH}} />
antd table 表格滚动高度适配 此篇文章解决antd table 表格的滚动区域高度适配问题 阅读详情

相关推荐

Ant Design Vue - 调整 table 表格每行(row)行高太高问题

前言 不知道什么原因,变得高度很高,如下图所示: 想要的效果: 解决方案 实际上导致这么高的原因是 padding ,并非 height ,且由 td 撑起来的 tr。 在当前页面加入以下代码: /deep/ .ant-table-tbody > tr > td { padding: 0px!important; } ...

🏆 前端领域优质创作者 1万+

antdesign table 滚动高度自适应

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

clare504的专栏 2709

React18+Antd后台管理系统源码解析与二次开发实战

后台管理系统是企业级前端开发中最常见的项目类型之一,其核心在于高效处理表单、表格与权限联动等复杂交互。React 18 引入了并发渲染机制,使得频繁的数据刷新和状态更新更加流畅;而 Ant Design 则提供了成熟的 Table、Form 等组件,大幅提升 CRUD 页面的开发效率。在实际工程中,如何设计动态路由与按钮级权限控制,决定了一个管理后台的可用性与安全性。本文基于一份真实项目源码,从技术选型、表格进阶用法、权限模型到构建优化,系统梳理了后台系统从 0 到 1 的关键环节,并给出二次开发时快速上手

cuankuangzhong6373的博客 361

antd table 设置固定高度

这是一个关于antd table 的一个小问题,官方api有介绍,为什么要写这篇博客,因为最初百度的时候没看到的答案都是一个模板且费劲,破坏全局css,所以记录下。 问题描述 我再使用antd 的table ,现在有个弹窗,弹框里有列表table,发现设置完是这个样子。 太长了,我要固定下table 高度,想想用css 样式设置下height 和滚动不就行了。 wtf ,看来想简单了,于是乎就百度了下。多半是强行重写ant 的table 样式。官方不推荐,我一般不这么用。于是乎想想其他办法。 解决方.

星宇大前端 1万+

手把手教你解决uniapp中esbuild版本冲突问题(Mac版专属指南)

本文是针对Mac平台uniapp开发者的专属指南,详细解析了运行项目时常见的`Cannot start service`错误,即esbuild的Host版本与binary版本不匹配问题。文章从错误根源入手,提供了从快速应急处理到彻底根治的完整解决方案,包括手动替换二进制文件、锁定依赖版本、清理缓存及优化工具链配置,旨在帮助开发者高效解决版本冲突,恢复并稳定开发环境。

i0j1k2l3m的博客 458

爬取国家统计局最近10年年度数据

一、编码流程 1.目标网址:https://data.stats.gov.cn/easyquery.htm?cn=C01 2.编码思路: (1) 解析左侧指标树,实现4级标签定位 (难点:层层嵌套,下一级指标的xpath路径以上一级指标为基础;不是所有二级指标都含有三和四级指标,需要进行判断) (2) 使用selenium webdriver 点选指标,加载出右侧表格数据 (难点:当指标无法在全局页面显示时,需向下拖动滚动条) (3) 解析右侧数据,实现数据存储 3.使用模块: (1) selenium:解

weixin_39645690的博客 4557

antd table minHeight

这种方法也不是不可以,但是若需要动态设置最小高度的话,这样写就不是很合适。第一步:计算table scroll height。第二步:设置滚动区域的高。

qq_32862143的博客 2745

TSMaster如何用珠海创芯CAN卡实现高效CAN通信(附完整驱动安装指南)

本文详细介绍了如何使用TSMaster软件与珠海创芯CAN卡实现高效CAN通信,包括驱动安装、系统配置、ControlCAN.dll替换及TSMaster集成配置等关键步骤。通过实战指南和故障排除技巧,帮助工程师快速搭建稳定可靠的CAN通信测试环境,适用于汽车电子和工业控制等领域。

weixin_29201859的博客 479

Antd table react 的滚动加载

import React, { useState, useEffect } from 'react'; import { Table } from 'antd'; import api from 'api/api'; const ListPage = (props) => { const [isMore, setIsMore] = useState(true); // 是否还有数据 const [page, setPage] = useState(1); // 页码 const [r...

weixin_40817168的博客 2786

OpenHarmony 4.1/5.0 Beta上手:如何用ArkUI在非华为设备上开发你的第一个“鸿蒙”应用

本文详细介绍了如何在非华为设备上使用ArkUI开发OpenHarmony应用,涵盖从设备选型、环境搭建到应用部署的全流程。通过实战案例展示ArkTS语言在开源鸿蒙生态中的应用,帮助开发者突破设备限制,构建跨平台鸿蒙应用。

weixin_33704234的博客 365

【Labview与SQL Server互联(labview可以引用数据库)】

Labview与SQL Server互联

Magize的博客 3585

bootstrap-table、antd-table组件(react)实现首行、首列固定的表格

table固定首行首列,使用bootstrap-table-jquery、antd-table-react两种框架满足需求。

ClassicSong的博客 2834

Unity之OpenXR+XR Interaction Toolkit接入HTC Vive

目前VR领域,最流行的设备要当属HTC VIVE了。以前在Unity端接入HTC VIVE设备时,都是通过SteamVR+VRTK来接入的。但是随着Unity的版本升级和OpenXR标准的流行,再加上VR设备的逐渐增多。SteamVR+VRTK的方式已经无法更好的满足大家的需求。

TxNet 4137

React组件自适应窗口宽高

很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算。 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化; 再比如说,当我们引用一个ant Table组件,并且动态传入columns及dataSource时,由于需要控制sroll值我们需要获得动态的width和height; ...... 下面...

weixin_34163741的博客 3887

基于STM32的智能快递柜设计(全部资料)

本文设计了一种基于STM32F407ZGT6的智能快递柜系统,通过模块化硬件设计和软件算法优化,实现了24小时无人值守、温湿度智能调控、远程监控等功能。系统集成OLED显示、GSM通信、舵机控制、超声波检测等模块,存取响应时间≤3秒,识别准确率达99.2%,较传统模式效率提升60%。测试表明系统运行稳定,用户满意度达92%,具有成本低、安全性高、可扩展性强等特点,为智慧物流末端配送提供了创新解决方案。未来可引入AI算法、太阳能供电等功能进一步优化系统性能。

3254968421的博客 585

深度学习论文: Towards Total Recall in Industrial Anomaly Detection

在大规模工业制造中,能够准确检测出有缺陷的零件至关重要。我们在这项工作中面临的一个特殊挑战是冷启动问题:仅使用正常的示例图像来训练模型。虽然可以针对每个类别手动设计解决方案,但我们的目标是构建能够自动适用于多个任务的系统。最佳的方法是将ImageNet模型的嵌入特征与异常检测模型结合起来。在本文中,我们在这一研究基础上进行了扩展,并提出了PatchCore,它利用了一个具有最大代表性的正常补丁特征内存库。通过这种方法,我们能够更好地解决冷启动问题,并提高系统在多任务上的性能。

mingo_敏 1875

react 控件怎么适应手机_React组件自适应窗口宽高

很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算。比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化;再比如说,当我们引用一个ant Table组件,并且动态传入columns及dataSource时,由于需要控制sroll值我们需要获得动态的width和height;......下面我们举几个栗子例...

weixin_39732491的博客 826

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

antd table动态表头_解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...

一、固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决。按照官网说的:1、若列头与内容不对齐或出现列重复,请指定固定列的宽度width。如果指定width不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。2、建议指定scroll.x为...

weixin_39996739的博客 1047

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

超简单实现antd3的table组件虚拟滚动

react antd3 table组件 虚拟滚动

@蟹卷的博客 2114

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

Antd Table 万级数据不卡顿的 6 条救命法则

Ant Design Table 是 B 端后台标配,但数据上万就卡顿、白屏、筛选迟钝——这些问题你大概率都踩过。这篇文章不讲虚的,直接给 6 条生产环境验证过的优化法则:虚拟滚动把渲染耗时从 3.2 秒压到 0.3 秒,列缓存避免海量重计算,权限列动态显隐是 B 端最易忽略的性能陷阱,列宽自适应告别拖拽卡顿,筛选排序直连后端减压,分页策略在体验与性能间取最优解。每条法则都有真实性能数据和可复用代码,全部基于 React + Antd 5.x 实测。如果你也在维护表格重度的中后台系统,这 6 招能救你的命。

Funpaid的博客 580

Antd table滚动高度动态获取自定义hooks useScrollY

【代码】Antd table滚动高度动态获取自定义hooks useScrollY。

看陌生的风景的博客 566

antd a-table表格添加序号和分页总数——基础积累

从今年开始,我要开始使用antd框架开发后台管理系统了,哇咔咔,要学习新东西了,超级开心。。。 今天遇到的一个需求就是a-table组件,需要添加一个序号一列,分页部分需要添加一个分页总数。 效果图如下: 1.a-table组件的使用 <a-table :rowKey="(r, i) => i" :columns="columns" :scroll="{ y: screenHeight, x: 1400 }" :dataSource="messageList" border

yehaocheng520的博客 1万+

Ant Design Table 自动填充容器高度:基于语义化 classNames 与 ResizeObserver 的 AutoHeightTable 封装实战

在真实后台界面中,Table 常常需要被放进一个高度受限(例如 `height: 400`、flex 布局剩余空间)的容器内,并希望它**始终自动填满容器**:表体随容器高度伸缩、内部纵向滚动,而不是让整页产生滚动条。本指南以 ant-design 仓库中 [auto-height 示例](https://link.gitcode.com/i/e7335dbc4fa06ddc8862a02ed11

gitblog_00662的博客 233

django element组件样式没有渲染_解析 Antd Table 组件的错位和性能问题

陆金所:陈铭嘉零. 开门见山的 Bug 解决方案在做活动引擎的过程中,发现 Antd 的 Table 组件会发送各种行错位,和列错位。关于行错位不是本节内容介绍的重点,本文主要介绍在启用固定列的时候(即使用fixed) 时发生的列错位 bug 以及其衍生的一系列性能问题。该写固定的 width,height 就写固定 width,height 。(修复简单,但这样 table 就不灵活,没法针对动...

weixin_31893057的博客 227

react+antd+table实现表格数据在当前页从头到尾循环滚动展示

不带分页的表格滚动

weixin_45481456的博客 2327

virtualized-table-for-antd:打造高效、可恢复的最小gzip大小虚拟表格组件

virtualized-table-for-antd:打造高效、可恢复的最小gzip大小虚拟表格组件 在Web应用开发中,表格组件是不可或缺的元素,特别是处理大量数据时,如何保证表格的响应速度和用户体验成为一大挑战。virtualized-table-for-antd(以下简称VTFA)正是为此而生,它是一款专为Ant Design 4设计的高性能虚拟表格组件。 项目介绍 VTFA以其快速、可恢复...

gitblog_00969的博客 404
上一篇: v3+ts 中定义全局方法
下一篇: input[type=file]上传图片的兼容问题
KeroroLX
博客等级 码龄9年 21粉丝 101原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值