700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > antd table动态表头_解决react使用antd table组件固定表头后 表头和表体列不对齐以

antd table动态表头_解决react使用antd table组件固定表头后 表头和表体列不对齐以

时间:2021-04-11 22:03:39

相关推荐

antd table动态表头_解决react使用antd table组件固定表头后 表头和表体列不对齐以

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

2.数据已经渲染,手动操做内容致使不对齐

若是表格内容会动态改变,好比可编辑表格内容校验失败后,下面显示错误信息、表格内容是能够多选的下拉选择框,选择的选项超过本来行高后表格内容被撑开等,都不会触发table动态计算fixed列和表格内容的高度,因此会出现行高不对齐。

在antd V4版本里以上问题获得了解决,并添加了可展开行和固定列功能的结合功能,能够看该连接的说明/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 table动态表头_解决react使用antd table组件固定表头后 表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。