element - el-table动态设置高度？不滚动了？

el-tabel对于开发者来说肯定是一个常用的UI组件。
在使用过程中，肯定要根据不同屏幕来动态设置table的高度。

而element也人性化的提供了height和max-height两个属性给开发者使用,但是在使用的过程中我遇到了如下的问题.

问题1: 设置max-height无效

代码如下:

<el-table :data="tableData" max-height="calc(100% - 300px)" style="width: 100%">
 ...
 ...
el-table>
1
2
3
4

遇到这个问题的原因，估计是我外部包裹的div没有设置固定高度，而不设置固定高度的原因还是在于想适配不同大小的浏览器。所以使用calc(100% - 300px)无效，然后尝试了下面使用vh的写法:

<el-table :data="tableData" max-height="calc(100vh - 300px)" style="width: 100%">
 ...
 ...
el-table>
1
2
3
4

诶，这样就使配的不同大小屏幕里table高度的问题，但是随即遇到了下述问题。

问题2: 设置max-height之后 table无法滚动

解决办法:

.el-table {
  display: flex;
  flex-direction: column;
}
1
2
3
4

此时可以进行滚动了，但是表头部分ui错乱了。查看页面元素，发现是被溢出隐藏了

问题3: table头部ui错乱

解决问题:

.el-table__header-wrapper {
  // overflow: visible !important; // 表头此时不会随着body左右滚动了
  height: 100px !important;  // 这个方案更推荐！！！
}
1
2
3
4

如此即可实现所需效果！