1. 程式人生 > 其它 >docker-compose部署redis一主兩從

docker-compose部署redis一主兩從

一、固定表頭後表體列和表頭不對齊

此問題可能在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,更多情況可以裡面看下。

  

漫思