本文主要讨论在使用Ant Design的Table组件时遇到的动态表头对齐和固定列行高不一致的问题。首先介绍了在特定版本中由于宽度设置和tableLayout属性导致的对齐问题，以及官方提供的解决方案。其次，针对固定列行高不对齐的情况，分析了可能的原因，如数据渲染、内容动态变化等，并提出了在Antd V4版本的改进和V3版本的处理方法，包括利用窗口resize事件来同步行高。最后，给出了一种通过触发resize事件来强制重新计算表格排版的方法，以解决性能可能下降的问题。
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
最低0.47元/天 解锁文章
4139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
