Vue + Element UI 表格自适应高度如何做？

文章目录

摘要

在实际开发中，我们经常会遇到这样的场景：页面上有一个表格（el-table），上方有筛选条件或按钮操作区，而我们希望表格部分能 自适应浏览器窗口高度 ，在窗口缩放时自动调整高度，让用户始终无需滚动整个页面就能浏览完整表格。

本文将带你一步步实现：Element UI 表格高度自适应布局，包括计算逻辑、生命周期钩子处理、窗口监听等核心技巧。

一、在表格上添加高度参数

Element UI 的 <el-table> 组件支持 height 或 max-height 属性来控制表格高度。

要让表格高度动态变化，我们可以绑定一个变量：

js 复制代码

<template>
  <el-table
    :data="tableData"
    :max-height="tableHeight"
  ></el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableHeight: 500, // 默认高度
    };
  },
};
</script>

通过给表格添加 :max-height="tableHeight"，即可让表格根据 JS 动态计算的值进行自适应调整。

二、编写计算高度的方法

核心在于动态计算可用空间的高度。

在 Vue 中计算 DOM 尺寸时，需要等页面渲染完成后再进行，因此必须使用 $nextTick 或 requestAnimationFrame 来确保获取到正确的尺寸。

js 复制代码

methods: {
  // 计算表格高度
  calculateTableHeight() {
    // 等 Vue 更新 DOM 后，再等一帧渲染完成，保证尺寸稳定
    this.$nextTick(() => {
      requestAnimationFrame(() => {
        // 获取视口高度
        const windowHeight = window.innerHeight;
        // 获取筛选区域元素
        const filterEl = document.querySelector('.el-collapse');
        // 获取筛选区域高度
        const filterHeight = filterEl ? filterEl.offsetHeight : 0;
        // 计算表格高度 = 视口高度 - 筛选区域高度 - 其他固定元素高度(头部、边距等)
        this.tableHeight = windowHeight - filterHeight - 100; // 100为其他固定区域的估计值
      });
    });
  },
},

💡 技巧提示：

requestAnimationFrame 可以确保在浏览器下一帧绘制前计算尺寸，避免出现抖动或高度错误的问题；
100 可以根据页面实际结构微调，例如顶部导航栏、内边距等的总高度。

三、在合适的生命周期中触发计算

我们需要在三个时机触发高度计算：

页面加载完成时；
浏览器窗口尺寸变化时；
组件销毁前清理事件监听。

js 复制代码

mounted() {
  // 初始计算表格高度
  this.calculateTableHeight();

  // 监听窗口大小变化，重新计算表格高度
  window.addEventListener('resize', this.calculateTableHeight);
},

beforeDestroy() {
  // 组件销毁前移除事件监听，防止内存泄漏
  window.removeEventListener('resize', this.calculateTableHeight);
},

四、完整示例代码

js 复制代码

<template>
  <div>
    <!-- 筛选区域 -->
    <el-collapse class="filter-area">
      <!-- 筛选条件内容 -->
    </el-collapse>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      :max-height="tableHeight"
      border
    >
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableHeight: 500,
    };
  },
  methods: {
    calculateTableHeight() {
      this.$nextTick(() => {
        requestAnimationFrame(() => {
          const windowHeight = window.innerHeight;
          const filterEl = document.querySelector('.el-collapse');
          const filterHeight = filterEl ? filterEl.offsetHeight : 0;
          this.tableHeight = windowHeight - filterHeight - 100;
        });
      });
    },
  },
  mounted() {
    this.calculateTableHeight();
    window.addEventListener('resize', this.calculateTableHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateTableHeight);
  },
};
</script>

<style scoped>
.filter-area {
  margin-bottom: 10px;
}
</style>

五、总结

在 Vue + Element UI 项目中实现表格自适应高度，关键有三点：

动态绑定 max-height 属性；
在 $nextTick + requestAnimationFrame 中精确计算高度；
在 mounted 和 resize 时机中调用计算函数。

这样，你的表格就能优雅地响应浏览器高度变化，避免出现滚动条嵌套或空白区域，让页面布局更干净、体验更流畅。