解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐
一、固定表头后表体列和表头不对齐
此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决。
按照官网说的:
1、若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。如果指定 width 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。
2、建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。
如果按照以上方法处理还是存在部分偏差,可以尝试给需要固定表头table设置css属性table-layout:fixed。
可以看到官网在3.24.0版本后table组件的属性新增了tableLayout,https://ant.design/components/table-cn/#API 。其默认值说明里也介绍了:固定表头/列或使用了 column.ellipsis时,默认值为 fixed
如果给column设置啦属性ellipsis:true,table的tableLayout会默认为fixed。
当然添加table-layout:fixed的同时还是需要满足官网说的给每列设置width、scroll.x 大于表格宽度的值。
二、配置fixed固定左右侧列后,固定列的行高和表体内容行高不对齐
1.默认初始化数据渲染后不对齐
只是普通展示列表,数据渲染完后不对齐的情况,可以确认下table配置的rowKey是否每行都存在该字段值,如果都不存在为null或者部分不存在会导致行高不对齐,如下图:

2.数据已经渲染,手动操作内容导致不对齐
如果表格内容会动态改变,比如可编辑表格内容校验失败后,下面显示错误信息、表格内容是可以多选的下拉选择框,选择的选项超过原本行高后表格内容被撑开等,都不会触发table动态计算fixed列和表格内容的高度,所以会出现行高不对齐。
在antd V4版本里以上问题得到了解决,并添加了可展开行和固定列功能的结合功能,可以看该链接的说明https://zhuanlan.zhihu.com/p/102037418,但是antd v4版本不兼容IE11以下的浏览器,而且v3用的还有很多,这个问题已经成为遗留问题,github有说http://react-component.github.io/table/examples?path=/story/rc-table--readme可以单独下载引用实现对齐,不知道该组件是否为v4中的组件,是否不兼容低版本的IE。
v3的版本里只能自己去根据内容动态去计算处理了,不过antd的table会在窗口resize的时候,重新计算表格的排版,可以使用这个方式更快捷的实现行高对齐,不过可能性能会差一点。可以使用如下方法,在需要重新计算表格行高的时候触发
const myEvent = new Event('resize');
window.dispatchEvent(myEvent);
或者使用https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver监听DOM的高度变化,然后执行重新计算fixed的表格行高。不过不兼容<IE11。
另附上网上看到的介绍antd table各种不对齐的总结https://blog.csdn.net/baozhuona/article/details/94007661,更多情况可以里面看下。
解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐的更多相关文章
- React使用antd Table生成层级多选组件
一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...
- 使用 antd Table组件, 异步获取数据
使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...
- jasper使用table组件设计复杂的表头
1.1 设计报表模板 1.1.1 新建模板DemoReport5.jrxml,去掉不需要的Band,保留Title,Page Header,Detail 1 , PageFooter.将组件Table ...
- REACT 使用antd Table 中rowSelection遇到的问题
首先项目是尚硅谷的后台谷粒平台,在用到antd Table 中的 rowSelection时,出现了一个问题(P87时遇到的问题): 表格中的每一项前面有一个radio单选框可以选中,本来是想利用ro ...
- react中使用antd Table组件滚动加载数据的实现
废话不多说,直接上代码.一目了然. import React, { Component } from "react"; import { Table } from "an ...
- React之Antd table表格渲染按钮问题
问题描述:table表格渲染表格数据时,会自动触发操作列中Button的onClick函数,表格渲染完成后,点击Button按钮,onClick函数不能被触发. // 定义表格表头数据 问题写法: ...
- react 使用antd导航组件实现事件传递并局部刷新DOM
我们要实现一个通过点击顶部导航来查询左侧菜单的一个功能 在这个功能中,我们要应用到onClick={this.headNavMenuList.bind(this)}方法来传递点击 不同按钮来传递不同的 ...
- 封装react antd的表格table组件
封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状 ...
- React中使用Ant Table组件
一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...
随机推荐
- java基础-循环标签
outer: for innter: for break outer//跳出整个循环: continue outer//结束本次外循环的循环 break inner; continute inner; ...
- Python3-sys模块-解释器相关参数与函数
Python3中的sys模块提供了访问由解释器使用和维护的一些变量和与解释器强烈交互的函数 sys.argv 获取传递给Python脚本的参数列表,sys.argv[0]代表脚本本身,sys.argv ...
- Android 用视频做页面背景
不知道怎么开头,直接代码. xml:RelativeLayout布局,MyVideoView放在第一位,其他的放到之下就可以. <MyVideoView android:id="@+i ...
- The Meaningless Game 思维题
题目描述 Slastyona and her loyal dog Pushok are playing a meaningless game that is indeed very interesti ...
- MongoDB 逻辑还原工具mongorestore
mongorestore是官方提供用来还原导入由mongodump导出生成的二进制备份文件的工具,通常与mongodump配合使用,关于mongodump工具的使用可以参考另一篇博文:MongoDB ...
- web网页动态分享facebook和twitter
介绍 facebook分享 http://www.facebook.com/sharer.php?t=${text}u=encodeURIComponent('静态html') twitter分享 h ...
- Edit Static Web File Http Header Metadata of AWS S3 from SDK | SDK编程方式编辑储存在AWS S3中Web类文件的Http Header元数据
1.Motivation | 起因 A requirement from the product department requires download image from AWS S3 buck ...
- redis(六):Redis 字符串(String)
Redis 字符串数据类型的相关命令用于管理 redis 字符串值,基本语法如下: 语法 redis 127.0.0.1:6379> COMMAND KEY_NAME 实例 redis 127. ...
- python 面向对象专题(二):类的空间问题、类与对象之间的关系、类与类之间的关系
https://www.cnblogs.com/liubing8/p/11308127.html 目录 Python面向对象02/类的空间问题.类与对象之间的关系.类与类之间的关系 1. 类的空间问题 ...
- How to change the text color in the terminal
You can open the file ~/.bashrc and then choose the force_color_prompt=yes otherwise, you can change ...