antd 设置表头属性_解决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);

antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...相关推荐

antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...
解决iview UI的Table组件数据刷新但是页面不刷新的问题
在改变了 Table 绑定的 data 变量的数值后,表格的数据刷新了,但是页面不刷新,之前滚动到的位置仍然在那里,而且如果左右两侧有固定列的时候,会错位,解决方法是给 Table 组件绑定一个 Ke ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题
在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...
对象存储HTML自定义属性,设置对象属性_对象存储服务 OBS_SDK参考_Node.js_上传对象_华为云...
开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法. 您可以在上传对象时设置对象属性.对象属性包含对象长 ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
antd 设置表头属性_使用表数据自定义React Antd表头
In my React project, I need to customize antd table header as follows I have added sample code bello ...
antd 设置表头属性_纯css实现固定表头和锁定列
### table 表格是一个网站很常用的元素,用以展示大量的数据.在处理表格时,通常会加入许多功能,如斑马线.选中高亮.固定表头.锁定列等等,本篇文章主要介绍如何单纯的使用css实现固定行或列的功能 ...
怎么设置滚轮拖动_解决三斜线表头一拖动就变形的问题，再也不用一次一次的调整了...
Hello,大家好,工作中大家肯定遇到过这样的情况,就是制作好的三斜线表头稍微拖动下就会发生错位或者变形,又要重新调整,非常的麻烦,今天跟大家分享一种三斜线表头拖动不变形的方法一.设置对齐方式这个 ...

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

antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...相关推荐

最新文章

热门文章