如何实现antdtable自动调整可视高度（纵向滚动条,scrollY）

如何实现antdtable⾃动调整可视⾼度（纵向滚动条,scrollY）⼀.事情的起因
最近在做的项⽬中有⼤量的表格,正常的表格⾼度是没有限制的,数据量很⼤的时候会出现表格内容以及分页信息超出可视窗⼝,
为了查看超出的部分就需要滚动页⾯但是这样就会把查询条件等信息滚出可视窗⼝
滚动后的页⾯:
⽽产品经理⼜想要把所有信息都同时展现在页⾯中.这样就需要给表格内容设置⼀个固定的⾼度,怎么实现呢?
⼆.Table scroll 属性的应⽤
这个还是⽐较简单实现的,因为antd Table 有⼀个属性scroll:
<Table
className="components-table-demo-nested"
columns={columns}
expandable={{ expandedRowRender }}
dataSource={data}
scroll={{y:600}}
/>
其中这个y的值可以是number,也可以是string,输⼊特定的数字是能限制⾼度,但是对不同的屏幕尺⼨适配不太好,
因此可以使⽤动态计算 css3 calc() ⽅法实现:
scroll={{y:'calc(100vh - 400px)'}}
当然这个400px 是屏幕中除了表格内容以外的⾼度,需要计算和调试才能得到
看到这⾥⼏乎⼀般的这种需求(表格⽐较少的页⾯)就能解决了,但是如果只是这样我也就没必要专门这么多的篇幅去记录了...三.事情的转折
正当我⾟⾟苦苦把每个页⾯的Table都这样计算调试好后,本来以为就可以完美收官了,这时传来了⼀个噩耗:
产品经理觉得表格上⽅的布局间隙太⼤影响了表格内容的展⽰所以需要统⼀调⼩点,
调节上边布局事⼩,但是会影响到表格内容展⽰的⾼度,需要把每个表格的srcoll.y重新进⾏调整,这要是⼗⼏个页⾯⼀个个去调节,在加上说不定啥时候上边的布局⼜有调整还不得把⼈累死,所以⼲脆想个⼀劳永逸的⽅法
四.⾃动计算表格内容的⾼度
主要思路就是通过js动态获取表格内容上⽅的⾼度,可以获取Table的标题栏Header的底部距离顶部的距离
(为什么不获取表格内容Body顶部到页⾯顶部的距离?因为表格内容滚动的时候Body的顶部会移动,在⼀些情况下会影响判断),⾄于获取元素到顶部的距离可以使⽤ getBoundingClientRect()来实现,
Element.getBoundingClientRect()⽅法返回元素的⼤⼩及其相对于视⼝的位置。

话不多说直接上代码:
/**
* 获取第⼀个表格的可视化⾼度
* @param {*} extraHeight 额外的⾼度(表格底部的内容⾼度 Number类型,默认为74)
* @param {*} id 当前页⾯中有多个table时需要制定table的id
*/
export function getTableScroll({ extraHeight, id }) {
if (typeof extraHeight == "undefined") {
// 默认底部分页64 + 边距10
extraHeight = 74
}
let tHeader = null
if (id) {
tHeader = document.getElementById(id) ? document.getElementById(id).getElementsByClassName("ant-table-thead")[0] : null } else {
tHeader = document.getElementsByClassName("ant-table-thead")[0]
}
//表格内容距离顶部的距离
let tHeaderBottom = 0
if (tHeader) {
tHeaderBottom = tHeader.getBoundingClientRect().bottom
}
//窗体⾼度-表格内容顶部的⾼度-表格内容底部的⾼度
// let height = document.body.clientHeight - tHeaderBottom - extraHeight
let height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`
return height
}
Table 引⽤:
const [scrollY, setScrollY] = useState("")
//页⾯加载完成后才能获取到对应的元素及其位置
useEffect(() => {
setScrollY(getTableScroll())
}, [])
<Table
className="components-table-demo-nested"
columns={columns}
expandable={{ expandedRowRender }}
dataSource={data}
scroll={{y:scrollY}}
/>
做到这⾥算是告⼀段落了,下⼀步做⼀个公共组件集成这个⽅法就⾏了,⽬前只想到了这个⽅法
朋友们要是有更好的⽅法也欢迎留⾔,谢谢了~。