如何實現 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()}} 
/> 

作到這裏算是告一段落了,下一步作一個公共組件集成這個方法就好了,目前只想到了這個方法

朋友們要是有更好的方法也歡迎留言,謝謝了~