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,一经查实,立即删除!

相关文章

python slice类型_复合类型Slice python中的list

# GO types Slice### Author 品茶> Slice(切片)代表变长的序列,序列中每个元素都具有相同的类型,slice类型写成[]T,T代表slice中元素的类型,slice的语法和数组很像> 只是没有固定长度而已。> slice的底层引用一个数组对象…

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版微信率先上线的新功能,这次在安卓内测版中也…

查看mysql 日记 工具_mysqlbinlog(日志管理工具)

mysqlbinlog用于处理二进制的日志文件,如果想要查看这些日志文件的文本内容,就需要使用mysqlbinlog工具。1.mysqlbinlog命令的语法shell > mysqlbinlog [options] logfile1 logfile2 ...2.mysqlbinlog的选项-d, --databasename 仅显示指定数据库的转储…

python实现ping命令_[小菜随笔]python tkinter实现简单的ping命令

本文主要是介绍python图形界面上的按键与实际功能的对接,其实编程掌握了基础之后的学习应该都是靠自己去挖掘其他的在网上发现多半教程都是2的,故本文使用的是python3.5,其实也没什么区别,就有一些支持库改变而已首先我们使用pyth…

删除 索引 外键 mysql_MySQL无法删除外键约束中所需的索引

MySQL无法删除外键约束中所需的索引我需要更改现有数据库以添加列。 因此,我还想更新UNIQUE字段以包含该新列。 我试图删除当前索引但仍然收到错误MySQL Cannot drop index needed in a foreign key constraintCREATE TABLE mytable_a (ID TINYINT NOT NULL AUTO_IN…

python decorator_python 中的decorator

python 中decorator的作用就是一个包装的作用,所谓包装指在执行真正的函数之前或者之后,我们可以有一些额外的发挥余地。decorator形式如下def dec(arg1):print("dec",arg1)def func_replace(func):print("func_replace",func)def c…

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

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

python pandas缺失值处理_Pandas之缺失值处理

原标题:Pandas之缺失值处理本文作者:杨长青本文编辑:周聪聪技术总编:张学人好消息!!!爬虫俱乐部将于2019年5月2日至4日在武汉举行Stata编程技术五一训练营,此次采用理论与案例相结合…

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

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

python奖励多少钱_关于python的问题,好的高奖励!

我想设计一个猜数字程序:系统随机生成一个四位数a,之后用户也输入一个四位数b,这里,将进行判断:b中各个数位上的数字是否在a出现,有出现,那么将b中的那个数为上的数字定位Y......(简略...我想设计一个猜数字程序:系统随机生成一个四位数a,之后用户也输入一个四位数b,这里,将进行…

如何在mysql中添加用户_如何给mysql数据库添加一个用户

首先以root身份登录到MySQL服务器中。$ mysql -u root -p当验证提示出现的时候,输入MySQL的root帐号的密码。创建一个MySQL用户使用如下命令创建一个用户名和密码分别为"myuser"和"mypassword"的用户。mysql> CREATE USER myuserlocalhost I…

python可视化图表工具_酷炫的可视化图表工具来帮忙 深度评测五大Python数据可视化工具...

原标题:酷炫的可视化图表工具来帮忙 深度评测五大Python数据可视化工具不少Python用户的一大诉求是做出各种酷炫的可视化图表,而这就需要了解清楚工具特色,才好在制作不同类型图表顺利找到适合自己的那一款。今天就来聊聊五个Python数据可视化…

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…

python制作海报_生成海报(前端 | python)

我最近没有摸鱼,一直都在工作。只不过目前需要爬一点数据 python 做的,之后看机会分享一下。忙着忙着老大说要生成海报,有个活动要给每个用户来个分享图。想法PS 批处理?脚本? 能甩出去的活都甩出去,机智如…

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

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

python正负数转换,如何在Python中将负整数值转换为十六进制

I use python 2.6>>> hex(-199703103)-0xbe73a3f>>> hex(199703103)0xbe73a3fPositive and negative value are the same?When I use calc, the value is FFFFFFFFF418C5C1.解决方案Pythons integers can grow arbitrarily large. In order to compute the …

mysql 分表索引_mysql中,分表查询和索引查询哪个更快?

谢谢邀请!查询快慢主决的因素有很多,存储碎片、数据量大属于I/O类问题;表结构设计、查询语句属于技术是否熟练(经验)问题。对于你的分表快还是索引快的这个问题本身就是有问题的:在建立数据表的时候,索引是必须的&…

fluent python 第二版_Fluent Python 笔记(二):序列基础

目录:本篇开始总结 Python 基本的数据结构,大部分情况下,这些数据结构就已经够用了,不需要重复造轮子。首先是序列及其相关的操作。序列(Sequence)标准库中提供了很多序列类型,都是C实现的,效率很高。容器序…