Element ui ＜el-table＞表格高度自适应

在使用 Element UI 的 <el-table> 组件时，要实现表格高度的自适应，可以通过设置 CSS 样式来实现。以下是一个简单的示例：

1. 设置外部容器的高度为100%，确保父容器有确定的高度。
2. 使用 CSS 的 height: 100%; 属性来设置 <el-table> 的高度自适应。

HTML 结构示例：

<template>
  <div class="table-container" style="height: 100%;">
    <el-table :data="tableData" style="height: 100%;">
      <!-- 列配置 -->
    </el-table>
  </div>
</template>

CSS 样式：

<style>
.table-container {
  height: 100vh; /* 视口高度，确保父容器高度为浏览器可视区域的高度 */
  width: 100%;
  overflow: auto; /* 防止内容溢出 */
}
</style>

Vue 组件示例：

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ]
    };
  }
};
</script>

这样设置之后，<el-table> 将自动适应其父容器的高度，并且如果父容器的高度发生变化（例如浏览器窗口大小变化时），表格的高度也会自适应。