el-table 根据屏幕大小动态设置max-height来自适应表格的最大高度出现滚动条_max-height calc_fairyIer的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

亲测，不行。。。网上大部分这个答案，但确实不行

于是，我看了下源码，发现el-table的max-height是有做监听的，所以，后期确实可以更改值，思路是对的，经过几番折腾，加上nextTick就可以了：

<script>
  export default {
    data() {
      return {
                tableHeight: 0
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 50;
            //后面的50：根据需求空出的高度，自行调整
</script>

好啦，我觉得这个方式也不是特别完美，完美的做法是：提个issue，让element-ui可以支持max-height接收除px和数值之外的其他css，如：max-height:calc(100vh - 40px)。

更优雅的解决方案：

该方案只适用于element-ui2.7.2及以下的版本，2.8.0及以上max-height不支持百分百，只支持px和数值，是因为官网为修复该 issue

现在发现max-height的合法的值除了数字或者单位为 px ，还可以是百分比，例如：max-height=“100%”这样设置是可以的。所以响应的动态设置el-table的max-height，我有了更优雅的解决方案，无需js，纯css，亲测有效：

<style lang="scss">
    .wrapper{
        height: calc(100% - 40px);
</style>
<div class="wrapper">
    <el-table ref="table" :data="info" max-height="100%">
    </el-table>
至于2.8.0及以上的版本，第一种方案依然有效，如果你有更好的方案，欢迎评论~
                    根据element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css，如：max-height:calc(100vh - 40px)//或者max-height:calc(100% - 40px)受网友启发，实现思路：通过js计算表格的最大高度，然后将高度数值传给el-table的max-height属性，上代码：html：...
				element的table表格组件有一个max-height属性，可以设置table的最大高度，但是当我设置这个属性的值为百分比或者响应式的时候，却没有生效，如下所示。
max-height:calc(100vh - 40px)
max-height:calc(100% - 40px)
这是因为element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css。
解决方法有以下几种：
首先列举出代码：
首先设置table组件的ref属性，以及设.
				一、定义获取浏览器窗口高度的js文件
相当于用js实现了 height: calc(100vh - 260px); 的效果
注意： 260  是顶部和底部导航以及部分自定义布局  ；
autoTableHeight.js
//获取浏览器窗口高度,处理Element的Table组件的高度问题（height只能是数字或者字符串）
function autoTableHeight() {
    var winHeight = 0;
    if (window.innerHeight) {
				如果你要求页面内容只能在一屏内显示，不想出现页面竖直滚动条，且页面使用el-table，那么就需要el-table动态计算高度
      <el-table
        v-loading="loading"
        :data="tableData"
        :height="tableHeight"
        ref="table"
        highlight-current-row
      <el-table-column ty
				关于父元素设置maxHeight或minHeight，子元素高度设置%的不生效的问题
要理解这个问题，首先要搞清楚一个元素的高度是由什么决定的？如果在不额外设置高度或者行高等外加的影响高度的css样式时，一个元素的高度就是其内部元素内容的高度之和。所以元素的高度是由内向外计算的。
<div class="box">
  <div class="item1">第一行内容</div>
    <div class="item2">第二行内容</div
				在 el-table 中设置高度后，如果最后一行显示不全，可能是由于表格的布局问题导致的。您可以尝试在 el-table 标签上添加属性 "element-loading-text" 来解决这个问题。
```html
<el-table
  :data="tableData"
  height="200"
  element-loading-text="正在加载"
  <!-- table columns -->
</el-table>
另外，您还可以尝试设置表格的 "max-height" 和 "overflow-y" 来解决这个问题。
```html
<el-table
  :data="tableData"
  max-height="200"
  style="overflow-y: auto"
  <!-- table columns -->
</el-table>
或者设置表格外面的父容器，让父容器超出隐藏
```html
<div style="overflow:auto;height: 200px">
  <el-table :data="tableData">
    <!-- table columns -->
  </el-table>
这些方法都可以让表格的高度固定，并且在数据过多时可以通过滚动条来查看数据。