1、固定表頭后表體列和表頭不對(duì)齊

此問題可能在antd3.24.0版本以前都存在，反正3.16.2版本是存在這個(gè)問題的，若是是3.24.0以前的版本估計(jì)只能經(jīng)過修改css樣式解決。css

按照官網(wǎng)說的：react

一、若列頭與內(nèi)容不對(duì)齊或出現(xiàn)列重復(fù)，請(qǐng)指定固定列的寬度?width。若是指定?width?不生效，請(qǐng)嘗試建議留一列不設(shè)寬度以適應(yīng)彈性布局，或者檢查是否有超長(zhǎng)連續(xù)字段破壞布局。git

二、建議指定?scroll.x?為大于表格寬度的固定值或百分比。注意，且非固定列寬度之和不要超過?scroll.x。github

若是按照以上方法處理仍是存在部分誤差，能夠嘗試給須要固定表頭table設(shè)置css屬性table-layout:fixed。瀏覽器

能夠看到官網(wǎng)在3.24.0版本后table組件的屬性新增了tableLayout，https://ant.design/components/table-cn/#API?。其默認(rèn)值說明里也介紹了：固定表頭/列或使用了?column.ellipsis時(shí)，默認(rèn)值為?fixedantd

若是給column設(shè)置啦屬性ellipsis:true，table的tableLayout會(huì)默認(rèn)為fixed。布局

固然添加table-layout:fixed的同時(shí)仍是須要知足官網(wǎng)說的給每列設(shè)置width、scroll.x?大于表格寬度的值。性能

2、配置fixed固定左右側(cè)列后，固定列的行高和表體內(nèi)容行高不對(duì)齊

1.默認(rèn)初始化數(shù)據(jù)渲染后不對(duì)齊spa

只是普通展現(xiàn)列表，數(shù)據(jù)渲染完后不對(duì)齊的狀況，能夠確認(rèn)下table配置的rowKey是否每行都存在該字段值，若是都不存在為null或者部分不存在會(huì)致使行高不對(duì)齊，以下圖：.net

2.數(shù)據(jù)已經(jīng)渲染，手動(dòng)操做內(nèi)容致使不對(duì)齊

若是表格內(nèi)容會(huì)動(dòng)態(tài)改變，好比可編輯表格內(nèi)容校驗(yàn)失敗后，下面顯示錯(cuò)誤信息、表格內(nèi)容是能夠多選的下拉選擇框，選擇的選項(xiàng)超過本來行高后表格內(nèi)容被撐開等，都不會(huì)觸發(fā)table動(dòng)態(tài)計(jì)算fixed列和表格內(nèi)容的高度，因此會(huì)出現(xiàn)行高不對(duì)齊。

在antd V4版本里以上問題獲得了解決，并添加了可展開行和固定列功能的結(jié)合功能，能夠看該連接的說明https://zhuanlan.zhihu.com/p/102037418，可是antd v4版本不兼容IE11如下的瀏覽器，并且v3用的還有不少，這個(gè)問題已經(jīng)成為遺留問題，github有說http://react-component.github.io/table/examples?path=/story/rc-table--readme能夠單獨(dú)下載引用實(shí)現(xiàn)對(duì)齊，不知道該組件是否為v4中的組件，是否不兼容低版本的IE。

v3的版本里只能本身去根據(jù)內(nèi)容動(dòng)態(tài)去計(jì)算處理了，不過antd的table會(huì)在窗口resize的時(shí)候，從新計(jì)算表格的排版，可使用這個(gè)方式更快捷的實(shí)現(xiàn)行高對(duì)齊，不過可能性能會(huì)差一點(diǎn)。可使用以下方法，在須要從新計(jì)算表格行高的時(shí)候觸發(fā)

const myEvent = new Event('resize');

window.dispatchEvent(myEvent);

總結(jié)

以上是生活随笔為你收集整理的antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。