ant-design框架table scroll功能增強

What problem does this feature solve?
scroll={{y: number}} y只能是數字,不能使用css的calc(100vh-120px)
y只能設置table-body的max-height,不夠靈活,比如無法設置height, min-height
What does the proposed API look like?

height

表格固定高度,在數據少的時候,分頁工具欄位置固定在底部,阿里雲控制檯以前就是這樣的

看了這個 #2428 ,以前是實現了,後面改成了max-height

table一般有兩種使用場景,增刪改查的列表頁和Modal彈框裏的數據表格,

  • 在列表頁的時候,分頁欄是固定還是跟隨表格內容,各有所需,希望能都支持
  • 在Modal裏顯示錶格的時候,希望表格內容可以固定高度,有以下原因
    顯示modal的時候,表格內容異步加載,modal高度會自動變化,設置modal高度不能完美解決這個問題
    表格數據的數量可以預估,數量不多,此時不需要分頁,沒有高度,就難看了,表格數據變化的時候,整個modal內容高度也在變化

minHeight

功能需求類似height

maxHeight

等同現在的scroll={{y: number}}

bodyStyle

可以完全自定義table body style,如果不能增加屬性height,增加bodyStyle也是可以的

&.auto-scroll-y {
height: 100%;
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-scroll,
.ant-table-body-inner,
.ant-table-fixed-left,
.ant-table-content {
height: 100%;
}
.ant-table-content {
position: relative;
}
.ant-table-body, .ant-table-body-inner {
overflow-y: auto!important;[如果要同時支持橫向滾動,請註釋此行(if you enable scroll-x, please disable this)]
}
.ant-table-header {
overflow-y: hidden!important;[如果列有輕微錯位請註釋掉這行(if table a little garbled, try disable this)]
}
.ant-table-body {
height: calc(100% - 27px[表頭高度(table head offset height)]);
}
.ant-table-body-outer {
height: calc(100% - 27px[表頭高度(table head offset height)]);
}
.ant-table-body-inner {
overflow-x: hidden;
}
}

這裏臨時給大家分享一個 max-height 的解決方法,請給你的 table 添加 className “auto-scroll-y”,props的scroll={{y: true}}。請不要忘記給你的列設置寬度,不然列錯位會很嚴重o(>﹏<)o!!!

最終實現:給你的table父元素設置高度即可限制table的最大高度,實現overflow-y: auto類似的效果。
Effect: Give your table's parent element a height, it can makes table works as overflow-y: auto.
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章