element-UI里面table好用，但是也有很多问题，需要根据场景具体解决。
今天说的问题就是：我要显示10条数据，给的高度也够，可是只显示了7条数据，需要我滚动才能显示剩下的，这样体验很不好。
如图所示：
image.png
那么原因是什么呢？大家接着往下看，，，
通过检查元素你会现表格的高度是363px，但是实际整个表格的高度确实445px：
image.png
那么问题来了，为什么会这样呢 ，为什么底下有高度数据却要滚动显示呢？
通过element-ui table 源码你会发现，表格的高度是通过计算获得的，计算的方式是，height=bodyHieght-headerHieght
在改图中之所以计算不准确，就是因为表头数据没有在一开始的额时候就设置，改图中的最后一个比例的表头，是通过计算之后push到表头中的，也是由此引发的这个问题。
解决办法1是：
使用table表格时，表头信息需要一次性加载完整，如果是后期往表头数据中加载新的表头，就极易出现高度不稳定的问题。
解决办法2是：
通过给table设置calss：table-fixed
再通过css选择器进行样式穿透 动态计算table的高度
.table-fixed {
/deep/.el-table__body-wrapper {
height: calc(100% - 44px) !important;
}
}
这样也可以解决以上的问题，但同时也会存在其他问题，比如当你的某一个表头文字过多需要两行显示时，那么headerHieght 的高度就不再是44px,，这样就会造成底下最后一条或者多条数据被遮盖，无法显示。
综上：当你的table表格数个组件的时候，建议你使用第一种解决方案解决该问题。若你的table表格只在某一个页面使用，而该页面的表头高度又能固定不变时，那你可以使用第二种解决方案。
最后希望以上可以对你有用~~~~~~~~~~~~~~~~
