解决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下载 项目的启 ...
随机推荐
- php artisan migrate数据迁移报错
laravel 5.4 改变了默认的数据库字符集,现在utf8mb4包括存储emojis支持.如果你运行MySQL v5.7.7或者更高版本,则不需要做任何事情. 当你试着在一些MariaDB或者一些 ...
- vue全家桶(4.1)
5.状态管理 5.1.兄弟组件之间共享数据的问题? 首先,我们需要了解下兄弟组件之间如何共享数据的问题 完成下列需求: 1.点击按钮,改变商品数量 2.点击加入购物车,在购物车的这个div盒子里需要显 ...
- #Google HTML&CSS规范指南
Google HTML&CSS规范指南 翻译自原文 目录 Google HTML&CSS规范指南 1. 背景 2. 通用 2.1 通用样式规则 2.1.1 协议 2.2 通用格式规则 ...
- (私人收藏)蓝色夜空背景的通用商务PPT模板
蓝色夜空背景的通用商务PPT模板 https://pan.baidu.com/s/1tsmPEdE5gjDDSxIyMDJGCA0m28
- PHPstorm常用快捷键(Windows)
本文整理本人在日常工作中使用最频繁的PHPstorm快捷键,以作为自己的总结备忘,也希望能够帮到有需要的小伙伴. 以下快捷键大致按本人的使用频率从高到低来介绍. 1.复制.粘贴 Ctrl+c .Ctr ...
- Spring事务的传播级别
一.简单说明 传播属性 描述 PROPAGATION_REQUIRED 如果当前没有事务,就创建一个事务,如果当前存在事务,就加入该事务. PROPAGATION_REQUIRED_NEW 当前的方法 ...
- zookeeper搭建和kafka搭建
zookeeper和kafka都是基于java的 zookeeper 1.安装jdk 官网下载rpm文件 rpm -ivh 文件.rpm 2.下载zookeeper tar -xv 压缩文件 -C 目 ...
- 用python执行rails项目sidekiq任务
我们先看一下如何ruby如何推一个任务到sidekiq https://github.com/mperham/sidekiq/wiki/FAQ#how-do-i-push-a-job-to-sidek ...
- nginx中的root和alias辨析
root介绍 Syntax: root path; Default: root html; Context: http, server, location, if in location Sets t ...
- celery 基础教程(一):工作流程,架构以及概念
1.工作流程 celery通过消息进行通信,通常使用一个叫Broker(中间人)来协client(任务的发出者)和worker(任务的处理者). clients发出消息到队列中,broker将队列中的 ...