如何實現 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()來實現,

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}} 
/> 

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

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