【Vue】Table组件动态最大高度

 在使用Vue框架开发项目时，经常会遇到需要调整组件尺寸以适应不同屏幕大小或窗口尺寸的需求。本文将介绍如何为el-table组件动态设置最大高度，以实现响应式布局。

 首先，我们需要在模板中为el-table组件添加一个max-height属性，并将其绑定到我们定义的tableHeight变量上。

<template>
  <el-table :max-height="tableHeight">
    <!-- 表格内容 -->
  </el-table>
</template>

 接下来，在<script>标签中，我们使用Vue 3的Composition API来定义tableHeight变量，并在组件挂载时添加一个resize事件监听器，以便在窗口大小发生变化时重新计算表格的最大高度。

<script>
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const tableHeight = ref(60);
    onMounted(() => {
      window.addEventListener('resize', computeHeight);
      updateHeight ();
    });
    const updateHeight = () => {
      tableHeight.value = window.innerHeight - 80 - 52 - 30 - 30;
    };
    return {
      tableHeight,
    };
  },
};
</script>

 在updateHeight 函数中，我们通过window.innerHeight获取当前窗口的内部高度，然后减去表格上方、下方和页脚的高度，得到表格的最大高度。这里的80、52、30和30分别表示页面顶部、底部和页脚的高度，以及可能存在的其他元素高度。在实际项目中，这些值可能需要根据实际情况进行调整。
 通过这种方式，我们就可以实现一个响应式的el-table组件，其最大高度会根据窗口大小的变化而动态调整。