element-UI里面table好用，但是也有很多問題，需要根據(jù)場景具體解決。
今天說的問題就是：我要顯示10條數(shù)據(jù)，給的高度也夠，可是只顯示了7條數(shù)據(jù)，需要我滾動(dòng)才能顯示剩下的，這樣體驗(yàn)很不好。
如圖所示：
那么原因是什么呢？大家接著往下看，，，
通過檢查元素你會(huì)現(xiàn)表格的高度是363px，但是實(shí)際整個(gè)表格的高度確實(shí)445px：
那么問題來了，為什么會(huì)這樣呢 ，為什么底下有高度數(shù)據(jù)卻要滾動(dòng)顯示呢？
通過element-ui table 源碼你會(huì)發(fā)現(xiàn)，表格的高度是通過計(jì)算獲得的，計(jì)算的方式是，height=bodyHieght-headerHieght
在改圖中之所以計(jì)算不準(zhǔn)確，就是因?yàn)楸眍^數(shù)據(jù)沒有在一開始的額時(shí)候就設(shè)置，改圖中的最后一個(gè)比例的表頭，是通過計(jì)算之后push到表頭中的，也是由此引發(fā)的這個(gè)問題。
解決辦法1是：
使用table表格時(shí)，表頭信息需要一次性加載完整，如果是后期往表頭數(shù)據(jù)中加載新的表頭，就極易出現(xiàn)高度不穩(wěn)定的問題。
解決辦法2是：
通過給table設(shè)置calss：table-fixed
再通過css選擇器進(jìn)行樣式穿透 動(dòng)態(tài)計(jì)算table的高度
.table-fixed {
/deep/.el-table__body-wrapper {
height: calc(100% - 44px) !important;
}
}
這樣也可以解決以上的問題，但同時(shí)也會(huì)存在其他問題，比如當(dāng)你的某一個(gè)表頭文字過多需要兩行顯示時(shí)，那么headerHieght 的高度就不再是44px,，這樣就會(huì)造成底下最后一條或者多條數(shù)據(jù)被遮蓋，無法顯示。
綜上：當(dāng)你的table表格數(shù)個(gè)組件的時(shí)候，建議你使用第一種解決方案解決該問題。若你的table表格只在某一個(gè)頁面使用，而該頁面的表頭高度又能固定不變時(shí)，那你可以使用第二種解決方案。
最后希望以上可以對(duì)你有用~~~~~~~~~~~~~~~~
