el-table 高度 自适应

`el-table`是Element UI库中的一个表格组件，它支持高度的自适应。为了使其高度自适应，你可以通过以下几种方式：

1. **动态高度**：当数据量变化时，可以设置表格的高度为`height`属性为`auto`或`calc(100% - [顶部边距 + 底部边距])`，这样表格会根据其内容自动调整高度。

<el-table :data="tableData" style="height: auto;">
  <!-- ... -->
</el-table>

2. **响应式设计**：如果你的表格容器有固定的最小高度或最大高度限制，可以结合CSS媒体查询来设置不同的高度样式。例如，在小屏幕设备上，可以设置一个较小的行高，而在大屏幕设备上则设置更高的空间。

.el-table {
  /* 在小屏下 */
  @media (max-width: 768px) {
    height: 400px;
  }
  /* 在大屏下 */
  @media (min-width: 769px) {
    height: 500px;
  }
}

3. **使用V-model绑定外部元素高度**：将表格的高度作为Vue实例的属性，并通过`v-model`与外部元素（如`.vue`文件中的某个div或其他元素）关联，这样当外部元素的大小改变时，表格高度也会相应更新。

<div ref="tableWrapper" v-bind:style="{ height: tableHeight }"></div>
<el-table :data="tableData" :height="tableHeight">
  <!-- ... -->
</el-table>
<script>
export default {
  data() {
    return { tableHeight: 'auto' };
  },
  computed: {
    // ...
  },
  watch: {
    // 当外部元素高度变化时，更新tableHeight
    $refs.tableWrapper: {
      handler(height) {
        this.tableHeight = height;
      },
      deep: true,
    },
  },
};
</script>