• 解决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组件的属性新增了tableLayouthttps://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);

        或者使用https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver监听DOM的高度变化,然后执行重新计算fixed的表格行高。不过不兼容<IE11。

     另附上网上看到的介绍antd table各种不对齐的总结https://blog.csdn.net/baozhuona/article/details/94007661,更多情况可以里面看下。

      

    漫思
  • 相关阅读:
    数组-11. 猴子选大王
    *数组-10. 求整数序列中出现次数最多的数
    数组-07. 求一批整数中出现最多的个位数字
    *数组-05. 字符串字母大小写转换
    数组-04. 查找整数
    《结对-网页贪吃蛇-最终程序》
    Forward团队-爬虫豆瓣top250项目-项目进度
    《结对-HTML贪吃蛇游戏项目-测试过程》
    课后作业-阅读任务-阅读提问-2
    《20171005-构建之法:现代软件工程-阅读笔记》
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/15207486.html
Copyright © 2020-2023  润新知