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

原创已于 2023-06-30 10:34:52 修改 · 8.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

于 2022-09-09 15:29:05 首次发布

elementUI 专栏收录该内容

19 篇文章

订阅专栏

本文探讨了在使用 Element UI 的表格组件时遇到的动态设置 max-height 和滚动问题。首先，作者提到设置 `max-height` 为 `calc(100%-300px)` 无效，原因是外部 div 没有固定高度。然后尝试使用 `calc(100vh-300px)` 解决不同屏幕高度适配，但导致表格无法滚动。为了解决滚动问题，将 `.el-table` 的 `display` 设置为 `flex` 并调整 `flex-direction` 为 `column`，但这样会导致表头UI错乱。最后，通过设置 `.el-table__header-wrapper` 的 `height` 为 `100px` 来修复表头样式，成功实现了所需效果。

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>

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

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

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

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

解决办法:

.el-table {
  display: flex;
  flex-direction: column;
}

此时可以进行滚动了，但是表头部分ui错乱了。查看页面元素，发现是被溢出隐藏了
在这里插入图片描述

问题3: table头部ui错乱

解决问题:

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

如此即可实现所需效果！