解决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下载 项目的启 ...
随机推荐
- Flask01-HelloWorld
# flask学习 参考:http://www.pythondoc.com/flask-mega-tutorial/ ## python3. 默认支持虚拟环境使用(用最简单的方法,解决问题) wget ...
- 《HelloGitHub》第 51 期
兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...
- git和github入门指南(3.1)
3.远程管理 3.1.远程仓库相关命令 1.查看远程仓库名字,这里以github为例 git remote 上面命令执行后会得到:origin,这样一个名字,这个名字是我们克隆的时候默认设置好的 如果 ...
- myeclipse集成jad反编译步骤
(1) 将jad.exe放到java的jdk\bin目录下(2) 将jadeclipse插件net.sf.jadclipse_3.3.0.jar 拷贝到myeclipse安装目\Common\plug ...
- JavaScript基础数组的字面声名法(010)
1.两种方法的对比 数组在JavaScript中,就像大多数的其它语言 一样,是对象.我们可以使用JavaScript内置的数组构造函数Array()来创建数组.就象对象的字面声名法一样,数组也可以采 ...
- 华为云—环境安装(jdk安装,tomcat安装)
前言 在前面咱们讲到华为云的购买以及一些配置,通过上一文即可获得一个可以直接访问使用的云服务器.但是对于不同的人群服务器的使用用途可能不同,对于咱们大部分的java程序员来说,jdk.tomcat.m ...
- cat快速查找文件内指定信息
cat log.txt | grep "ERROR" | more 查找 log.txt 文件内 包含 “ERROR” 的信息,分屏显示
- Kail系统更新指令
0x00源更新 国内更新源 leafpad /etc/apt/sources.list 然后复制粘贴下面的源 #kali官方源 deb http://http.kali.org/kali kali-r ...
- linux环境下安装 openOffice4并启动服务
一.背景故事 openOffice是用来做office文档在线预览功能,把office文档转换成pdf交给前端显示. 之前系统开发过程一直没有将springboot服务怼上服务器,所以只安装了wind ...
- vue项目发布时去除console语句
在vue.config.js中添加下面的代码即可 // vue-cli version > 3 modeule.exports = { configureWebpack: config => ...