Vue 3 中使用 Element Plus 的 `el-table` 组件实现自适应高度

在 Vue 3 中使用 Element Plus 的 `el-table` 组件实现自适应高度，你可以根据容器的高度动态设置表格的高度。通常的做法是监听窗口大小的变化，并相应地调整表格的高度。

以下是一个示例代码，展示了如何实现这一功能：

1. 安装 Element Plus（如果还没有安装）：

   npm install element-plus --save
   # 或者
   yarn add element-plus
   

2. 创建一个 Vue 组件，并实现 `el-table` 的自适应高度：

<template>
  <div ref="tableContainer" class="table-container">
    <el-table
      :data="tableData"
      :height="tableHeight"
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  setup() {
    const tableData = ref([
      { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
      { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
      // 更多数据...
    ]);

    const tableContainer = ref(null);
    const tableHeight = ref(0);

    const updateTableHeight = () => {
      if (tableContainer.value) {
        // 计算表格的高度
        const containerRect = tableContainer.value.getBoundingClientRect();
        const containerHeight = containerRect.height;
        tableHeight.value = containerHeight - 20; // 减去一些边距或标题栏的高度
      }
    };

    // 监听窗口大小变化
    const handleResize = () => {
      updateTableHeight();
    };

    onMounted(() => {
      updateTableHeight(); // 初始化时计算一次高度
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    return {
      tableData,
      tableHeight,
      tableContainer,
    };
  },
};
</script>

<style scoped>
.table-container {
  height: 100vh; /* 你可以根据需要调整这个值 */
  overflow: auto;
}
</style>

解释

• <el-table>：Element Plus 提供的表格组件。
• :height="tableHeight"：绑定表格的高度，使其可以根据 `tableHeight` 的值动态变化。
• tableContainer：引用了包含表格的容器，用于获取其高度。
• updateTableHeight：计算并更新表格的高度。
• handleResize：处理窗口大小变化的函数，调用 `updateTableHeight` 来更新表格高度。
• onMounted:和 `onUnmounted`**：Vue 生命周期钩子，分别在组件挂载和卸载时执行相应的操作。
• window.addEventListener('resize', handleResize)：添加窗口大小变化事件监听器。
• window.removeEventListener('resize', handleResize)：移除窗口大小变化事件监听器，避免内存泄漏。

这样，当窗口大小发生变化时，表格的高度会自动调整以适应新的窗口尺寸。你可以根据实际需求调整 `tableContainer` 的高度以及减去的边距值。