elementplus el-table高度适配

### 解决方案

在 Vue 3 中使用 Element Plus 的 `el-table` 组件实现自适应高度，可以通过监听窗口大小变化并动态调整表格的高度来完成这一目标[^1]。

#### 动态计算表格高度的方法

为了使表格高度能够随着浏览器窗口尺寸的变化而自动调整，可以采用如下策略：

- **获取父级容器的实际可用空间**：考虑到页面布局复杂性不同，最可靠的方式是从 DOM 结构出发找到放置表格的那个具体区域作为参照物。

- **利用 JavaScript 获取视窗信息**：借助于 window.innerHeight 或者特定 div 容器的 clientHeight 来得知当前可视区域内可分配给表格的最大高度。

- **响应式设计考虑**：当屏幕宽度发生变化时（比如移动设备旋转），也需要重新评估和设定新的表格高度值以保持良好的用户体验。

下面是一个简单的例子展示如何实现上述逻辑：

// 假设有一个名为 'tableContainer' 的 ref 对象指向包含 el-table 的 HTML 元素
import { onMounted, onUnmounted } from "vue";

export default {
  setup() {
    let tableHeight = ref(0);
    
    const resizeHandler = () => {
      // 计算新高度并将结果赋值给 data 属性中的变量
      tableHeight.value = document.documentElement.clientHeight - /*其他固定部分所占像素*/;
    };

    onMounted(() => {
      window.addEventListener('resize', resizeHandler);
      resizeHandler(); // 初始化时也执行一次
    });

    onUnmounted(() => {
      window.removeEventListener('resize', resizeHandler);
    });
    
    return {
      tableHeight,
    };
  },
};

接着，在模板里应用这个样式属性到 `<el-table>` 上面去：

<template>
  <div style="height: 100%;">
    <!-- ... -->
    <el-table :style="{ height: `${tableHeight}px` }">
      <!-- 表格内容 -->
    </el-table>
    <!-- ... -->
  </div>
</template>

这样就可以让 `el-table` 根据其所在位置及其上下文环境下的剩余垂直空间来自定义自身的显示高度了。需要注意的是，实际项目中可能还需要处理更多细节问题，例如滚动条的影响、动画效果等。