element-ui的table实现高度自适应

使用两层div嵌套

<div class="table-wrapper-flex">
      <div class="table-wrapper-flex-content">
        <el-table
          style="width: 100%;"
          height="100%"
          >
         </el-table>
      </div>
</div>

1.最外层div使用flex部署

2.第二层使用calc计算高度

3.最后设置表格的height="100%"

.table-wrapper-flex {
  flex: 1;
  overflow: auto;
  .table-wrapper-flex-content {
    position: relative;
    height: calc(100%); /* 最外层高度需要设置100%， 避免触发重排 */
  }
}