Element表格el-table固定表头且高度占满

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();

大功告成！