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

问题描述

表格内容过多时显示滚动条：可通过

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

解决方案：

 <div class="container">
      <!-- 搜索 -->
      <div class="search">
        <el-form :inline="true">
          <el-form-item>
            <el-input clearable placeholder="请输入查找内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary">查找</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <div class="tablesBox">
        <div class="tablesContent">
         <!-- 注意关键点：el-table 要设置 height="0" -->
          <el-table :data="tableData" height="0">
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="address" label="地址" />
          </el-table>
        </div>
      </div>
    </div>

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.search {
  height: 70px
}

 /* 表格容器自动撑满剩余空间 */
.tablesBox {
  flex: auto;
  overflow: hidden;

  .tablesContent {
    height: 100%;
    width: 100%;

    .el-table {
      /* 表格高度设置 */
      height: 100% !important;
    }
  }
}