固定 Element UI 表格表头的方法（超简单）

在日常开发中，使用 Element UI 的 Table 组件时，经常会遇到表格数据量较大、滚动查看时表头跟随滚动消失的问题，导致用户无法快速对应列数据，影响使用体验。其实固定 Element UI 表格表头的实现方法非常简单，核心只需满足两个关键条件，下面就带大家一步步实操，轻松搞定表头固定需求。

一、核心原理

固定表头的本质是让表格的表头部分（thead）和内容部分（tbody）分别独立滚动，且两者列宽保持一致。Element UI 的 Table 组件已经内置了相关支持，我们无需手动编写复杂的 CSS 定位和滚动逻辑，只需通过简单的属性配置和样式调整，就能实现表头固定效果。

二、具体实现步骤

下面以 Vue 2 + Element UI 2.x 为例（Vue 3 + Element Plus 方法类似，属性名称一致），分基础实现和细节优化两步讲解。

步骤 1：基础配置（核心代码）

只需在 el-table 标签上添加两个核心属性：height（设置表格固定高度）和 fixed-header（开启固定表头，Element UI 2.2.0+ 支持，低版本可省略，直接通过 height 触发），同时给每一列设置明确的 width（保证表头和内容列宽一致）。

示例代码：

html 复制代码

<template>
  <div class="table-container">
    <!-- 核心：设置 height + 给列加 width -->
    <el-table
      :data="tableData"
      height="400"  <!-- 关键1：固定表格高度（单位px，可根据需求调整） -->
      border
      stripe
      fixed-header  <!-- 关键2：开启固定表头（Element UI 2.2.0+） -->
    >
      <!-- 关键3：每一列设置明确 width，保证表头和内容列宽一致 -->
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="姓名" width="120" align="center" prop="name"></el-table-column>
      <el-table-column label="年龄" width="80" align="center" prop="age"></el-table-column>
      <el-table-column label="邮箱" width="200" align="center" prop="email"></el-table-column>
      <el-table-column label="地址" width="300" align="center" prop="address"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <el-button type="text" size="small">编辑</el-button>
        <el-button type="text" size="small">删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟大量表格数据
      tableData: Array.from({ length: 50 }, (_, i) => ({
        name: `用户${i + 1}`,
        age: 18 + Math.floor(Math.random() * 20),
        email: `user${i + 1}@example.com`,
        address: `北京市朝阳区建国路${i + 1}号`
      }))
    };
  }
};
</script>

步骤 2：细节优化（解决常见问题）

完成基础配置后，可能会遇到一些小问题，比如列宽不一致、滚动条遮挡内容、自适应屏幕宽度等，下面针对性解决：

1. 列宽不一致问题

核心原则：所有列必须设置明确的 width ，且表头列（el-table-column）和内容列的 width 完全一致。如果部分列需要自适应，可将最后一列的 width 设为 auto，并给表格添加 fit 属性（自动拉伸表格宽度，适应容器）。

优化代码（修改 el-table 和最后一列）：

html 复制代码

<el-table
  :data="tableData"
  height="400"
  border
  stripe
  fixed-header
  fit  <!-- 自动适应容器宽度 -->
&gt;
  <!-- 其他列保持不变 -->
  <el-table-column label="操作" width="auto" align="center">
    <el-button type="text" size="small">编辑</el-button>
    <el-button type="text" size="small">删除</el-button>
  </el-table-column>
</el-table>

2. 滚动条遮挡内容问题

当表格内容滚动时，滚动条可能会遮挡最后一列内容，只需给表格容器添加少量右内边距即可解决：

html 复制代码

<style scoped>
.table-container {
  padding-right: 6px;  /* 给滚动条预留空间 */
}
/* 可选：调整滚动条样式，提升美观度 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #ccc;
}
</style>

3. 自适应屏幕高度

如果需要表格高度自适应屏幕剩余空间（而非固定 400px），可以通过计算属性动态设置 height。例如，让表格高度 = 屏幕高度 - 顶部导航高度 - 其他间距：

html 复制代码

<script>
export default {
  computed: {
    tableHeight() {
      // 屏幕高度 - 顶部导航高度（假设为60px） - 上下间距（假设为40px）
      return window.innerHeight - 60 - 40 + 'px';
    }
  },
  mounted() {
    // 监听窗口大小变化，动态调整表格高度
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 销毁时移除监听，避免内存泄漏
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 60 - 40 + 'px';
      });
    }
  }
};
</script>

三、Element Plus 适配说明

如果使用 Vue 3 + Element Plus，实现方法完全一致，仅组件导入方式不同，核心属性（height、fixed-header、fit）和列宽设置逻辑不变：

html 复制代码

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

const tableData = ref(Array.from({ length: 50 }, (_, i) => ({
  name: `用户${i + 1}`,
  age: 18 + Math.floor(Math.random() * 20),
  email: `user${i + 1}@example.com`,
  address: `北京市朝阳区建国路${i + 1}号`
})));

// 动态计算表格高度
const tableHeight = ref('400px');
const handleResize = () => {
  tableHeight.value = window.innerHeight - 60 - 40 + 'px';
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
  handleResize(); // 初始化高度
});

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

四、常见问题排查

表头不固定？检查是否设置了 height 属性，且 height 值小于表格内容实际高度（只有内容超出表格高度才会滚动，表头才会固定）。
表头和内容列宽不一致？检查每一列是否都设置了 width，避免部分列设置、部分列不设置；如果使用 fit 属性，确保容器宽度足够。
低版本 Element UI 不支持 fixed-header？Element UI 2.2.0 以下版本无需设置 fixed-header，只需给 el-table 设置 height 并给列设置 width，即可自动固定表头。

五、总结

固定 Element UI 表格表头的核心就是「设置固定高度 + 统一列宽」，两步就能搞定：一是给 el-table 加 height 属性，二是给每一列加 width 属性，再根据需求添加 fit 自适应、动态高度计算等优化项。整个过程无需复杂的自定义样式和脚本，完全借助组件内置能力，新手也能轻松掌握！

如果这篇教程对你有帮助，别忘了点赞👍、关注👀、收藏🌟三连支持哦！若觉得内容实用，也欢迎打赏❤️，你的鼓励是我持续分享的动力～