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.
发布了82 篇原创文章 · 获赞 46 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/weixin_43720095/article/details/89923672