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

时间:2022-10-20 11:53:56

一、固定表头后表体列和表头不对齐

此问题可能在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组件的属性新增了tableLayouthttps://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或者部分不存在会导致行高不对齐,如下图:

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

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固定左右侧后行高度不对齐的更多相关文章

  1. React使用antd Table生成层级多选组件

    一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...

  2. 使用 antd Table组件, 异步获取数据

    使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...

  3. jasper使用table组件设计复杂的表头

    1.1 设计报表模板 1.1.1 新建模板DemoReport5.jrxml,去掉不需要的Band,保留Title,Page Header,Detail 1 , PageFooter.将组件Table ...

  4. react中使用antd Table组件滚动加载数据的实现

    废话不多说,直接上代码.一目了然. import React, { Component } from "react"; import { Table } from "an ...

  5. React之Antd table表格渲染按钮问题

    问题描述:table表格渲染表格数据时,会自动触发操作列中Button的onClick函数,表格渲染完成后,点击Button按钮,onClick函数不能被触发. // 定义表格表头数据 问题写法:  ...

  6. react 使用antd导航组件实现事件传递并局部刷新DOM

    我们要实现一个通过点击顶部导航来查询左侧菜单的一个功能 在这个功能中,我们要应用到onClick={this.headNavMenuList.bind(this)}方法来传递点击 不同按钮来传递不同的 ...

  7. 封装react antd的表格table组件

    封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状 ...

  8. React中使用Ant Table组件

    一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...

  9. 放弃antd table,基于React手写一个虚拟滚动的表格

    缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...

随机推荐

  1. poj&lbrack;2392&rsqb;space elevator

    Description The cows are going to space! They plan to achieve orbit by building a sort of space elev ...

  2. GitHub帮助文档翻译1——helloWorld

    工欲善其事必先利其器 ,都不知道 GitHub到底是什么,还怎么玩?因为总是会读了第一句就忘了下一句,形成不了感觉,所以希望把读GitHub的帮助文档都翻译出来,总是看大段大段的东西,谁都会懵圈的.希 ...

  3. think in python 11 字典

    字典 字典类似于列表,但更加通用 键值对 ,字典是 键与值之间的映射,每个键都映射到一个值上 dict可以创建一个不包含任何项的字典 eng2sp = dict() print eng2sp 还可以给 ...

  4. MongoDB安全策略

    一,修改启动端口 mongo的默认端口为27017 如果启用的是27017端口并且在公网上很容易被人攻击,所以第一点我们要修改端口 sudo ./mongod --dbpath=/data/db -- ...

  5. 使用FlexPaper实现在线预览

    准备工作 1.下载并安装安装OpenOffice 2.下载并安装FlexPaper 3.下载jodconverter 5.下载并安装swftools 软件安装具体方式按照 这篇博客 :http://b ...

  6. 自学Zabbix3&period;10&period;1&period;2-事件通知Notifications upon events-媒介类型SMS

    自学Zabbix3.10.1.2-事件通知Notifications upon events-媒介类型SMS 服务器安装串口GSM短信猫之后,zabbix可以使用它来发送短信通知给管理员,如下注意事项 ...

  7. iOS----------输入框UITextField禁止输入空格

    方法一:添加代理 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range rep ...

  8. Python 元组tuple相关知识

    列表是有序的,列表元素可以被修改.元组是有序的,元组的一级元素不可被修改,但如果是元组的二级.三级元素并且刚好该元素是列表,则可以被修改.元组中的元组可进行for 循环,因此元组也是可迭代对象.字符串 ...

  9. Linux简易APR内存池学习笔记&lpar;带源码和实例&rpar;

    先给个内存池的实现代码,里面带有个应用小例子和画的流程图,方便了解运行原理,代码 GCC 编译可用.可以自己上网下APR源码,参考代码下载链接: http://pan.baidu.com/s/1hq6 ...

  10. Vs10&period;设置&period;高亮(20190327)

    ZC:(20190327)只要使用的是 "Highlight all occurrences of selected word" 和 "Visual Assist X&q ...