1. 固定表头
el-table固定表头非常简单,只要给添加height属性即可。
<el-table height="250"></el-table>
2. 占满高度
如果想让表格占满当前高度,必要前提是让父元素的高度先撑满当前高度。
<div style="height:100%">
<el-table height="100%"></el-table>
</div>
3. 使用vh占满高度
而有些情况下,设置height为100%只能保证固定表头,高度无法占满,此时可以尝试使用。注意1vh表示可视区域的高度的1%,还是非常好用的。
<div style="height:100%">
<el-table height="100vh"></el-table>
</div>
注意使用vh后,会发现虽然占满了,但是表头又无法固定了…
我太难了。。
4. 动态调整高度
最终还有一个方案,就是动态调整:
<div class="table-container">
<el-table :height="elTableHeight "></el-table>
</div>
mounted: function () {
// 高度调整
this.elTableHeight = $('.table-container').height();
大功告成!