antd设置表头属性_解决react使⽤antdtable组件固定表头后，
表头和表体列不对。。。
⼀、固定表头后表体列和表头不对齐
此问题可能在antd3.24.0版本之前都存在，反正3.16.2版本是存在这个问题的，如果是3.24.0之前的版本估计只能通过修改css样式解决。
按照官⽹说的：
1、若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不⽣效，请尝试建议留⼀列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
2、建议指定 scroll.x 为⼤于表格宽度的固定值或百分⽐。注意，且⾮固定列宽度之和不要超过 scroll.x。
如果按照以上⽅法处理还是存在部分偏差，可以尝试给需要固定表头table设置css属性table-layout:fixed。
如果给column设置啦属性ellipsis:true，table的tableLayout会默认为fixed。
当然添加table-layout:fixed的同时还是需要满⾜官⽹说的给每列设置width、scroll.x ⼤于表格宽度的值。
⼆、配置fixed固定左右侧列后，固定列的⾏⾼和表体内容⾏⾼不对齐
1.默认初始化数据渲染后不对齐
只是普通展⽰列表，数据渲染完后不对齐的情况，可以确认下table配置的rowKey是否每⾏都存在该字段值，如果都不存在为null或者部分不存在会导致⾏⾼不对齐，如下图：
2.数据已经渲染，⼿动操作内容导致不对齐
如果表格内容会动态改变，⽐如可编辑表格内容校验失败后，下⾯显⽰错误信息、表格内容是可以多选的下拉选择框，选择的选项超过原本⾏⾼后表格内容被撑开等，都不会触发table动态计算fixed列和表格内容的⾼度，所以会出现⾏⾼不对齐。
react native v3的版本⾥只能⾃⼰去根据内容动态去计算处理了，不过antd的table会在窗⼝resize的时候，重新计算表格的排版，可以使⽤这个⽅式更快捷的实现⾏⾼对齐，不过可能性能会差⼀点。可以使⽤如下⽅法，在需要重新计算表格⾏⾼的时候触发
const myEvent = new Event('resize');
window.dispatchEvent(myEvent);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。