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

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

此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决。css

按照官网说的:react

一、若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。若是指定 width 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。git

二、建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。github

若是按照以上方法处理仍是存在部分误差,能够尝试给须要固定表头table设置css属性table-layout:fixed。浏览器

能够看到官网在3.24.0版本后table组件的属性新增了tableLayout,https://ant.design/components/table-cn/#API 。其默认值说明里也介绍了:固定表头/列或使用了 column.ellipsis时,默认值为 fixedantd

若是给column设置啦属性ellipsis:true,table的tableLayout会默认为fixed。布局

固然添加table-layout:fixed的同时仍是须要知足官网说的给每列设置width、scroll.x 大于表格宽度的值。性能

2、配置fixed固定左右侧列后,固定列的行高和表体内容行高不对齐

1.默认初始化数据渲染后不对齐spa

只是普通展现列表,数据渲染完后不对齐的状况,能够确认下table配置的rowKey是否每行都存在该字段值,若是都不存在为null或者部分不存在会致使行高不对齐,以下图:.net

bf7f47a29ee748f4b720b4d9.html

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);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue通过class获取dom_.NET Core通过Json或直接获取图形验证码(务必收藏备用)

(给DotNet加星标,提升.Net技能)转自:殷慈航cnblogs.com/jiyuwu/p/11803979.html很多人写的博客大家看了会一知半解,不知道怎么用,应该引用什么类库或者代码不全,这样很多小白很是头疼,尤其是尝新技术更是如…

c++ 动态分配数组_C/C++编程笔记:「C语言指针」民间解读版本

相信很多同学在初学C语言时候,都会遇到遇到一个问题:指针,永远的神!好消息,这个痛点将会在这篇文章得到解决,妈妈再也不用担心我的学习了!一说指针,第一反应,指针是一种数…

安卓menu页面跳转_微信安卓版7.0.14内测!“发现小程序”页面大改版

除了安卓用户心心念念的“群备注”,“发现-小程序”面板也有大变动~话不多说,赶紧下载内测版体验新功能(后台回复【7014】,即可获取内测版下载链接)群备注:虽迟但到此前iOS版微信率先上线的新功能,这次在安卓内测版中也…

css before after用法_CSS 伪元素基础知识:content 与counter 实用技巧(二)

在CSS 伪元素基础知识:before 与after (一),笔者已经介绍过 CSS 里的::before 和::after 这两个伪元素,以及content 相关的用法,这篇将针对content 搭配counter (计数器) 进行一些有趣的应用,相信熟练之后搞不好能做出…

c语言怎么让写的函数兼容int型和char型_既然C语言void指针是“万能指针”,那么malloc还需类型转换吗?...

在C语言程序开发中,动态内存分配是不可避免的,而调用 malloc()/free() 库函数实现这一过程是方便的,事实上,在很多C语言程序中,malloc/free 库函数的使用相当频繁,它俩的C语言函数原型如下,请看…

mysql datetime最小值_MySQL的5种时间类型的比较

日期时间类型占用空间日期格式最小值最大值零值表示DATETIME8 bytesYYYY-MM-DD HH:MM:SS1000-01-01 00:00:009999-12-31 23:59:590000-00-00 00:00:00TIMESTAMP4 bytesYYYY-MM-DD HH:MM:SS197001010800012038 年的某个时刻00000000000000DATE4 bytesYYYY-MM-DD1000-01-019999-1…

Mysql数据库的简单备份与还原_史上最简单的MySQL数据备份与还原教程

本文主要为大家详细介绍了史上最简单的MySQL数据备份与还原教程第一篇,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。数据备份与还原第一篇分享给大家,具体内容如下基础概念:备份,将…

mysql数据库云读取_云数据库 MySQL版

{"moduleinfo":{"banner_bigTit":"云数据库 MySQL版读写分离上线","banner_subTit":"自动扩展读写分离,性能提升不止一点","banner_link":"https://rdsnew.console.aliyun.com/console/index#/rd…

mysql查询并设置高亮_慢查询分析调优工具~mysqldumpslow

在日常的业务开发中,MySQL出现慢查询是很常见的,要么说明你家产品的增长性很好,要么就是你的SQL写的太烂了。所以对慢查询SQL进行分析和优化很重要,其中mysqldumpslow是MySQL服务自带的一款很好的分析调优工具。MySQL慢查询日志My…

非法的表达式开始_轮回、开始还是结束?

上节课说到&#xff0c;要打印0-9这十个数字&#xff0c;除了一个一个的 document.write 还有什么办法?下面介绍一个for语法for (var 变量 初始值; 结束判断表达式; 变量递增/递减) { 循环体&#xff0c;用于处理变量;}我们来实操一下for (var c0;c<9;cc1) { do…

sql 统计记录条数后 打印出所有记录_用SQL完成购买行为分析(下篇II)

&#xff08;接《用SQL完成购买行为分析&#xff08;下篇I&#xff09;》内容&#xff09;12&#xff09;查询首条记录为fav&#xff0c;总记录条数为14的记录。将前面getNum(3)红框处替换为12&#xff0c;运行getNum(14)得到第2条记录的数量&#xff1a;替换为11&#xff0c;得…

library的英语怎么读音_library怎么读声音

library的英式读音和美式读音均为&#xff1a;[ˈlaɪbrəri]。library可作名词&#xff0c;其作名词时&#xff0c;中文意思有&#xff1a;图书馆&#xff1b;藏书楼&#xff1b;图书室&#xff1b;资料室&#xff1b;(书、激光唱片等的)个人收藏等含义。一、library 读音英式…

sift线特征提取代码_车道线检测LaneNet

LanNetSegmentation branch完成语义分割,即判断出像素属于车道or背景Embedding branch完成像素的向量表示,用于后续聚类,以完成实例分割H-NetSegmentation branch解决样本分布不均衡车道线像素远小于背景像素.loss函数的设计对不同像素赋给不同权重,降低背景权重.该分支的输出为…

mysql ehcache_MyBatis使用Ehcache作为二级缓存

特别说明&#xff1a;由于二级缓存是基于Mapper的&#xff0c;当你在不同的mapper中查询了相同的数据&#xff0c;例如不同的Mapper中有多表查询时结果中有相同的数据&#xff0c;当其中一个Mapper进行插入更新缓存时&#xff0c;另一个并没有插入更新&#xff0c;那么使用两个…

yii3正式版什么时候发布_华为mate50pro什么时候发布

阅读本文前&#xff0c;请您先点击上面的蓝色字体&#xff0c;再点击“关注”&#xff0c;这样您就可以继续免费收到文章了。每天都有分享&#xff0c;完全是免费订阅&#xff0c;请放心关注。 …

shiro如何保证session不失效_请问在不加锁的情况下如何保证线程安全?

概念compare and swap&#xff0c;解决多线程并行情况下使用锁造成性能损耗的一种机制&#xff0c;CAS操作包含三个操作数——内存位置(V)、预期原值(A)和新值(B)。如果内存位置的值与预期原值相匹配&#xff0c;那么处理器会自动将该位置值更新为新值。否则&#xff0c;处理器…

externalreferences 命令在 sdi 模式下不可用_一个适合新手交互式Git命令学习项目

前言在我们日常工作开发中&#xff0c;Git是必不可少的版本控制软件&#xff0c;很多时候我们都用Git来管理我们的项目。比较常用的有Github&#xff0c;Gitlab&#xff0c;Stash等。因此对于Git命令的掌握是我们工作必备的能力。今天分享一个Git命令学习项目&#xff1a;learn…

sqlyong 删除数据能否撤回_数据结构知识点总结

some quoted by Fundebug&#xff1a;代码面试需要知道的8种数据结构(附面试题及答案链接)​zhuanlan.zhihu.comadded with other sources8 种常用数据结构数组栈队列链表图树哈希表priorityqueue1. 数组数组(Array)大概是最简单&#xff0c;也是最常用的数据结构了。其他数据结…

matlab 点云特征_基于点云的3D障碍物检测

击上方“新机器视觉”&#xff0c;选择加"星标"或“置顶”重磅干货&#xff0c;第一时间送达基于点云的3D障碍物检测主要有以下步骤&#xff1a;点云数据的处理基于点云的障碍物分割障碍物边框构建点云到图像平面的投影点云数据的处理KITTI数据集KITTI数据集有四个相…

重定义 不同的基类型_镍及铁镍基耐蚀合金高温合金哈氏合金镍基合金之第一篇概述...

纯镍是一种重要的应用于工业的原材料&#xff0c;它除具有良好 的强度、塑韧性外&#xff0c;在卤族元素及其氢化物活泼性气体、苛 性介质、不含氧和氧化剂的还原性酸介质中还具有良好的耐 蚀性&#xff0c;因此纯镍作为耐蚀金属材料得到广泛应用。此外&#xff0c;由 于提高耐…