Element-UI el-table高度不固定，自适应高度显示滚动条

问题描述

表格内容过多时显示滚动条：可通过max-height设置一个固定的数值高度实现，但是项目中的需求是表格的高度不能写死，要自适应高度来显示滚动

解决方案：

1.  
   <div class="container">
2.  
   <!-- 搜索 -->
3.  
   <div class="search">
4.  
   <el-form :inline="true">
5.  
   <el-form-item>
6.  
   <el-input clearable placeholder="请输入查找内容"></el-input>
7.  
   </el-form-item>
8.  
   <el-form-item>
9.  
   <el-button size="mini" type="primary">查找</el-button>
10.  
    </el-form-item>
11.  
    </el-form>
12.  
    </div>
13.  
     
14.  
    <!-- 表格 -->
15.  
    <div class="tablesBox">
16.  
    <div class="tablesContent">
17.  
    <!-- 注意关键点：el-table 要设置 height="0" -->
18.  
    <el-table :data="tableData" height="0">
19.  
    <el-table-column prop="date" label="日期" />
20.  
    <el-table-column prop="name" label="姓名" />
21.  
    <el-table-column prop="address" label="地址" />
22.  
    </el-table>
23.  
    </div>
24.  
    </div>
25.  
    </div>

1.  
   .container {
2.  
   height: 100%;
3.  
   width: 100%;
4.  
   display: flex;
5.  
   flex-direction: column;
6.  
   }
7.  
    
8.  
   .search {
9.  
   height: 70px
10.  
    }
11.  
     
12.  
    /* 表格容器自动撑满剩余空间 */
13.  
    .tablesBox {
14.  
    flex: auto;
15.  
    overflow: hidden;
16.  
     
17.  
    .tablesContent {
18.  
    height: 100%;
19.  
    width: 100%;
20.  
     
21.  
    .el-table {
22.  
    /* 表格高度设置 */
23.  
    height: 100% !important;
24.  
    }
25.  
    }
26.  
    }

这篇好文章是转载于：学新通技术网