Element Plus表格組件max-height失效？如何讓表格高度自適應并顯示滾動條？

element plus表格組件max-height屬性失效及解決方法

在使用Element Plus開發過程中，我們經常會遇到需要表格高度根據內容動態變化，但又不能無限伸長的需求。理想情況下，表格高度應隨著內容增長而增長，直至達到父元素的100%，并出現滾動條以顯示超出部分的內容。然而，直接為el-table組件設置max-height: 100%屬性往往達不到預期效果，表格高度雖然會達到父元素的100%，但滾動條卻無法正常顯示。

這個問題的根本原因在于，el-table組件自身的高度計算機制。max-height屬性的生效依賴于一個確定的初始高度，而當內容未完全加載或內容高度變化時，el-table組件無法準確計算其自身高度，導致max-height屬性失效。

為了解決這個問題，我們可以采取以下兩種方法：

第一種方法是確保el-table組件擁有一個確定的高度值。這可以通過直接設置height屬性來實現，例如height: 500px或height: calc(100vh – 100px)。 這種方法的缺點是需要預先知道或計算出表格的理想高度，不夠靈活。

第二種方法則更加靈活，它通過監聽父元素的高度變化，并將父元素的高度動態賦予el-table組件。 具體實現方式需要使用JavaScript監聽父元素的resize事件或使用其他響應式布局技術。通過這種方法，el-table組件的高度始終與父元素的高度保持一致，從而實現了max-height: 100%的效果，即使內容高度超過父元素高度，滾動條也能正常顯示。這種方法能夠根據父元素大小自適應調整表格高度，更符合動態內容變化的需求。