如何实现 antd table 自动调整可视高度(纵向滚动条,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()来实现,话很少说直接上代码:

/**
 * 获取第一个表格的可视化高度
 * @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 引用:

<Table
            className="components-table-demo-nested"
            columns={columns}
            expandable={{ expandedRowRender }}
            dataSource={data}
            scroll={{y:getTableScroll()}} 
/> 

作到这里算是告一段落了,下一步作一个公共组件集成这个方法就好了,目前只想到了这个方法

朋友们要是有更好的方法也欢迎留言,谢谢了~