el-table max-height与下方固定分页高度自适应

在Element UI中，我们可以使用el-table组件来实现表格的展示，同时可以通过设置max-height属性来控制表格的最大高度。在表格下方添加分页组件时，可以通过计算表格和分页组件的高度来实现自适应布局。具体步骤如下：

1. 使用CSS的flex布局将表格和分页组件的容器排列在一起，设置flex-direction为column，使其垂直方向排列。

2. 将表格的容器设置为flex:1，使其占据剩余空间。

3. 设置表格的max-height属性，限制其高度。

4. 给分页组件的容器设置一个固定的高度，使其在表格高度不足时能够自适应。

下面是示例代码：

<template>
  <div class="table-container">
    <el-table :data="tableData" style="width: 100%;"
              :max-height="tableMaxHeight">
      <!-- 表格内容 -->
    </el-table>
    <div class="pagination-container">
      <el-pagination :total="total" :page-size="pageSize"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      pageSize: 10,  // 每页显示的条目数
      total: 0,      // 总条目数
      tableMaxHeight: 0 // 表格最大高度
    }
  },
  mounted() {
    // 计算表格最大高度
    this.tableMaxHeight = this.$el.offsetHeight - this.$refs.pagination.$el.offsetHeight - 50; // 50为表格和分页组件之间的间距
  },
  methods: {
    // 分页相关方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 获取表格数据
    getTableData() {
      // ...
    }
  }
}
</script>

<style>
.table-container {
  display: flex;
  flex-direction: column;
}

.el-table__body-wrapper {
  flex: 1;
}

.pagination-container {
  height: 50px;
}
</style>

注意：以上代码只是一个示例，具体实现要根据实际情况进行调整。