el-table如何设置高度自适应

el-table是Element UI中的一个表格组件，可以通过设置高度自适应来适应不同的数据量和页面布局。以下是设置el-table高度自适应的几种方式：

1. 使用CSS样式：可以通过设置el-table的外层容器的高度为100%来实现高度自适应，例如：

<div style="height: 100%;">
  <el-table :data="tableData" style="height: 100%;"></el-table>
</div>

2. 使用flex布局：将el-table所在的容器设置为flex布局，并将其高度设置为100%，例如：

<div style="display: flex; flex-direction: column; height: 100%;">
  <el-table :data="tableData"></el-table>
</div>

3. 动态计算高度：可以通过监听窗口大小变化或者表格数据变化，动态计算el-table的高度，例如：

<template>
  <div ref="tableContainer" style="height: calc(100vh - 200px);">
    <el-table :data="tableData" :height="tableHeight"></el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableHeight: 0
    };
  },
  mounted() {
    this.calculateTableHeight();
    window.addEventListener('resize', this.calculateTableHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateTableHeight);
  },
  methods: {
    calculateTableHeight() {
      const containerHeight = this.$refs.tableContainer.clientHeight;
      this.tableHeight = containerHeight;
    }
  }
};
</script>

以上是几种常见的设置el-table高度自适应的方式，你可以根据实际需求选择适合的方法。