你是不是也遇到过这种问题：一个满屏数据的表格，页面一滚起来，表头跟着内容跑了。数据一多，根本分不清哪列对应哪个字段，尤其是几十个字段的后台管理页面，下拉滚动几下就直接看花眼。
其实在 Element UI 里，固定表格表头这事儿属于最基础也最常用的需求之一。官方文档写得很简略，就一个height属性的事，但实际项目里会遇到各种细节问题，比如固定后列宽错位、固定列阴影遮挡、动态数据刷新表头抖动、高度怎么算才不溢出……这篇文章我就把自己在真实项目里用 Element UI 做表格表头固定的方案、踩坑记录和心得体会完整整理一遍，代码拿来就能用，顺便把原理也讲透——知其然，也知其所以然。
1. 固定表头原理与方案选型：为什么一个 height 属性就能搞定
1.1 Element UI 表格组件的内部结构拆解
El-Table 组件在渲染时并不是简单输出一个原生<table>，而是做了一层比较厚的封装。用浏览器开发者工具检查 DOM 结构，你会看到类似这样的层级：
<div class="el-table"> <div class="el-table__header-wrapper"> <table class="el-table__header"> <thead>...</thead> </table> </div> <div class="el-table__body-wrapper"> <table class="el-table__body"> <tbody>...</tbody> </table> </div> </div>核心是header-wrapper和body-wrapper这两个独立容器。表头是一个独立的<table>，表体又是另一个独立的<table>。Element UI 默认把它俩都放在同一块文档流里，所以当页面（或者外层容器）发生滚动时，表头和表体会作为一个整体一起移动，这就会出现最原始的问题状态。
当给 El-Table 设置了height属性后，组件内部会自动做两件事：第一，把body-wrapper区域的高度锁定为你设置的值，并让它内部的table容器产生垂直滚动条；第二，把header-wrapper固定在上方，不参与滚动。这就是“表头固定、表体滚动”背后的实现逻辑。
1.2 为什么这个方案是“超简单”的
很多同学一上来就尝试用 CSS 去修 El-Table 的样式，例如给.el-table__header-wrapper加position: sticky; top: 0，或者自己再套一层 div 做滚动容器，然后手动计算宽度对齐。我也这么干过，但结果是修了这版坏那版，尤其是涉及到border属性、多级表头、固定列时，CSS 方案会让列宽对齐变成一个噩梦。
Element UI 官方的height方案之所以值得推荐，是因为它把“测量表头高度、计算表体滚动区、同步滚动位置、对齐列宽”这些脏活累活全部封装在了组件内部。你不需要关心布局细节，只需要告诉表格“你的可视区域应该有多高”，剩下的交给组件。
这里先给个最简单的示例。引入 Element UI 之后，在普通业务组件里这样写：
<template> <div class="page-wrap"> <el-table :data="tableData" height="400" border> <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> export default { data() { return { tableData: [ { date: '2024-01-01', name: '张三', address: '北京市朝阳区' }, { date: '2024-01-02', name: '李四', address: '上海市浦东新区' }, // 多准备几条数据，方便看出滚动效果 ] }; } }; </script>这个例子跟官方文档基本一致，但我要多说一句：height不一定要写死，它可以传入字符串或数字。传字符串时可以带单位，比如height="30vh"；传数字时 Element UI 会自动补上px。另外，如果你希望表格高度不固定，能随着数据量变化，但又想让表头固定，可以用max-height属性替代height——前者是“最多这么高，超出后表体滚动”，后者是“永远这么高，表体始终滚动”。
1.3 固定表头属性选型对照
| 属性 | 作用 | 适用场景 | 表头是否固定 | 表体滚动行为 |
|---|---|---|---|---|
| height | 设置固定高度，超出后表体滚动 | 数据量确定，表格区域高度需要锁定 | 固定 | 始终在表头下方滚动 |
| max-height | 设置最大高度，超出后表体滚动 | 数据量可能少也可能多，页面布局弹性 | 固定 | 数据少时整表完整展示，数据多时滚动 |
| 不设置 | 表格完全展开，高度随数据增长 | 数据量少、无需滚动 | 不固定 | 不滚动 |
我在日常开发中的经验是：如果这个表格所在区域本身在页面布局里占了一块固定高度（比如卡片区域固定高度），那用height是更好的选择；如果表格在页面底部，上面还有其他组件，用max-height更稳妥，数据少时不会出现大面积的空白区。
2. 实操第一步：用 height 属性快速固定表头
2.1 完整示例代码与参数设定
固定表头这件事，核心代码就一行：height="400"。但就算只有一行，也得搞清楚数值怎么来，否则会出现表格底部被截断或者一大块空白的问题。
先给一个稍完整一点的可运行示例，模拟后台管理系统的典型页面结构：顶部一个筛选区，下面一个表格卡片。
<template> <div class="table-container"> <!-- 筛选区 --> <div class="filter-bar"> <el-input v-model="keyword" placeholder="搜索订单号" style="width: 240px;" clearable /> <el-button type="primary" @click="fetchData">查询</el-button> </div> <!-- 表格卡片 --> <el-card> <el-table ref="orderTable" v-loading="loading" :data="tableData" height="calc(100vh - 240px)" border stripe @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" fixed="left"></el-table-column> <el-table-column prop="orderNo" label="订单编号" width="160"></el-table-column> <el-table-column prop="customerName" label="客户名称" min-width="140"></el-table-column> <el-table-column prop="totalAmount" label="订单金额" width="120"> <template #default="{ row }"> <span>¥ {{ row.totalAmount.toFixed(2) }}</span> </template> </el-table-column> <el-table-column prop="status" label="订单状态" width="110"> <template #default="{ row }"> <el-tag :type="statusMap[row.status].type">{{ statusMap[row.status].label }}</el-tag> </template> </el-table-column> <el-table-column prop="createdAt" label="下单时间" width="170"></el-table-column> <el-table-column label="操作" width="140" fixed="right"> <template #default="{ row }"> <el-button size="mini" type="text" @click="handleDetail(row)">详情</el-button> <el-button size="mini" type="text" @click="handleCancel(row)">作废</el-button> </template> </el-table-column> </el-table> </el-card> </div> </template>这里我用了一个比较典型的高度策略：height="calc(100vh - 240px)"。为什么用calc而不是写死500px？因为不同屏幕尺寸下，固定高度要么造成表格底部溢出屏幕，要么造成大量剩余空白。而用calc可以动态把筛选区高度（大约 60px）、卡片内边距（大约 40px）、页面顶部导航栏和切页面包屑（大约 100px）全部抵消掉，让表格底边刚好抵到视口底部附近。
当然，calc里的数值需要根据自己的项目结构调整。更稳妥的方案是在mounted钩子里用 JavaScript 测量筛选区和卡片的位置，然后动态计算表格高度。这是后话，在第 3 节里我会详细说。
2.2 高度值的三种设定方式对比
| 设定方式 | 写法 | 优缺点 |
|---|---|---|
| 固定像素 | height="400" | 简单，但不同屏幕下表现不一致 |
| 视口百分比 | height="60vh" | 随屏幕高度变化，但对页面其他元素变化不敏感 |
| 动态计算 | height="calc(100vh - 240px)" | 灵活，一次适配多种屏幕，推荐 |
实际项目中，真正严谨的做法是结合“页面布局结构测量”来决定高度。比如说，表格所在的el-card距离视口顶部的距离是固定的，卡片底部距离视口底部又有一定边距，那表格高度就可以这样算：
computed: { tableHeight() { return window.innerHeight - this.$refs.cardRef.offsetTop - 装箱 offsetHeight(底部预留) } }但这种写法需要监听window.resize事件，否则浏览器尺寸变化时表格高度不会自动更新。一个常见的模式是：
data() { return { tableHeight: 500, tableCardTop: 0, reservedHeight: 140 // 底部预留高度 }; }, mounted() { this.calcTableHeight(); window.addEventListener('resize', this.calcTableHeight); }, beforeDestroy() { window.removeEventListener('resize', this.calcTableHeight); }, methods: { calcTableHeight() { const card = this.$refs.tableCard; if (card) { this.tableCardTop = card.getBoundingClientRect().top; this.tableHeight = window.innerHeight - this.tableCardTop - this.reservedHeight; } } }然后模板里写:height="tableHeight"。这个方案的优点是完全自适应，缺点是代码量稍多。我个人的习惯是，如果页面结构简单、终端设备固定（比如公司内部管理系统），直接用calc(100vh - xxxpx)就够了；如果项目是面向多种屏幕尺寸的 C 端后台，那就用 JS 动态计算。
3. 固定表头背后的细节：从列宽对齐到滚动容器
3.1 为什么表头固定后列对不齐
设置height之后，最常见的一个问题就是“表头和表体的列对不齐”。明明都是 El-Table，为什么列还能错位？
这跟浏览器原生滚动条的宽度有关。当body-wrapper出现垂直滚动条以后，滚动条本身要占一定的宽度（通常是 15px 左右，不同操作系统不一样）。Element UI 在计算列宽时，会把表头和表体的每一列宽度通过colgroup里的col元素进行显式指定。理论上是同步的，但有几种情况会导致错位：
- 某些列没有设置
width或min-width，组件无法确定列宽，只能靠测量渲染结果反推，测量时机不对时就可能出现表头、表体列宽不一致。 - 表格在初始渲染时数据还没加载完成，容器宽度是 0，测量出来的列宽就是错的，之后数据回来了也没有重新触发
doLayout。 - 表格所在容器使用了
display: none后再显示（比如放在el-tabs的非激活页里），容器宽度的测量结果不正确。
针对第 1 点，解决办法是：给每个列都尽量设置宽度参数。模糊适应可以用min-width，明确宽度就用width。不要把所有列都扔给组件自己算。
针对第 2、3 点，可以在数据加载完成后或者容器变为可见后，手动调用表格的doLayout方法：
this.$nextTick(() => { this.$refs.orderTable.doLayout(); });如果是el-tabs场景，需要在标签切换完成后执行：
handleTabClick() { this.$nextTick(() => { this.$refs.orderTable.doLayout(); }); }doLayout的作用就是让 El-Table 重新测量内部容器宽度并同步所有列的宽度。这个方法我几乎在每个使用表格的项目里都会用到，属于必会的 API。
3.2 固定列与固定表头叠加时的层级问题
很多后台表格不仅要固定表头，还要固定首列或者操作列。Element UI 提供了fixed="left"和fixed="right"属性，用法也很简单，但二者叠加时会出现一个视觉问题：固定列区域和滚动表体区域的阴影/层级可能会错乱。
看一张典型的场景：表头固定了，左侧多列也固定了，滚动时左侧固定列应该一直可见，而且它的表头也应该固定在上方。Element UI 2.x 已经处理了大部分情况，但还是有两个容易踩的坑：
- 固定列没有设置宽度，导致固定区域宽度计算错误，滚动时遮不住下面的数据列。
- 固定列与表体之间存在 1px 缝隙或者阴影重叠。
解法如下：
/* 修正固定列的层级 */ .el-table__fixed-right::before, .el-table__fixed::before { background-color: transparent; } /* 让固定列区域的滚动条隐藏（如果有） */ .el-table__fixed { overflow: hidden; }更彻底的方案是给表格的外层容器加一个小的样式补丁，处理 Safari 浏览器下的兼容问题：
.el-table__body-wrapper::-webkit-scrollbar { height: 8px; } .el-table__fixed-body-wrapper::-webkit-scrollbar { width: 0; }3.3 表头固定状态下的高度自适应用法进一步讲解
刚才提到了max-height，这里再多说一点。max-height和height的差异很多人分不清。如果你的需求是“默认表格不高，数据多的时候再出现滚动条，表头不能滚走”，那就用max-height。它的用户体验更柔和，数据少时页面干净，数据多时不炸裂。
<el-table :data="tableData" max-height="520"> ... </el-table>设置max-height后，表头同样会固定，滚动条只在超出最大高度时出现。注意，max-height也支持calc(100vh - xxxpx)。不过我个人认为，在面向多租户、多角色的后台系统里，表格区域通常有明确的卡片布局边界，直接用height会比max-height更平整——因为max-height在数据量动态变化时，表格高度来回跳，页面布局会跟着晃动，观感不太稳定。
4. 富表格需求的扩展：多级表头与汇总行的固定方案
4.1 多级表头（分组表头）下如何固定表头
Element UI 的表格是支持多级表头的，方法是在el-table-column里嵌套el-table-column。很多人觉得多级表头是高级功能，其实原理就是生成两行thead。话虽如此，多级表头配合固定表头时仍然有几个容易出问题的地方。
先看一个多级表头的写法：
<el-table :data="tableData" height="400" border> <el-table-column label="基础信息" align="center"> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="age" label="年龄" width="120"></el-table-column> <el-table-column prop="gender" label="性别" width="120"></el-table-column> </el-table-column> <el-table-column label="工作信息" align="center"> <el-table-column prop="company" label="公司" min-width="180"></el-table-column> <el-table-column prop="department" label="部门" width="140"></el-table-column> </el-table-column> </el-table>渲染出来的表头会分成两行，第一行是“基础信息”和“工作信息”，第二行是各自的子列。设置height="400"之后，整个多级表头都会固定在上方，滚动时不会跟着数据跑。这里没问题，但有个细节：多级表头下，如果某个顶级列没有加align="center"，子列的对齐方式可能不一致，视觉上会有点乱。
真正的麻烦在于：多级表头 + 固定列组合使用，比如要固定“姓名”这一列。此时必须在每一层级上都加上fixed="left"，而且只加在叶子列上还不够，父级列也要加。否则会出现“叶子列固定了，但表头父级单元格没固定住”的尴尬现象。正确的写法是：
<el-table-column label="基础信息" align="center" fixed="left"> <el-table-column prop="name" label="姓名" width="120" fixed="left"></el-table-column> </el-table-column>4.2 汇总行（合计行）的固定注意事项
Element UI 为表格提供了show-summary和summary-method两个属性，可以快速生成合计行。如果同时使用height固定表头，合计行会出现在表体滚动的底部，也就是说，它不会“贴”在表头下面，而是要滚动到最底下才能看到。
如果你希望合计行始终固定在表格底部（类似 Excel 里的冻结窗格效果），那就不能靠show-summary的默认行为，需要绕一下：把汇总数据单独做成一行，放在表格组件的下方，用 CSS 模拟成表格底部栏。
<div style="display: flex; border-top: 1px solid #EBEEF5;"> <div style="width: 120px; padding: 8px 0; text-align: center; font-weight: bold;">合计</div> <div style="flex: 1; padding: 8px 10px; font-weight: bold;">共 {{ totalCount }} 单</div> </div>这个最简单粗暴，也最灵活。不然的话，你还可以用summary-method自定义合计行的每个单元格内容，配合height时，合计行会固定在表格容器底部，不会跟随表体滚动，但依然要滚到底部才能看到。
4.3 自定义表头与表头吸顶
如果表格的固定高度需求不只是针对表头，而是希望表头区域的外观、操作逻辑更丰富，Element UI 支持通过#header插槽自定义表头单元格内容。
<el-table-column prop="status" label="订单状态" width="160"> <template #header> <div style="display: flex; align-items: center; justify-content: space-between;"> <span>订单状态</span> <el-select v-model="statusFilter" size="mini" style="width: 100px;" placeholder="筛选"> <el-option label="全部" value=""></el-option> <el-option label="已完成" value="done"></el-option> <el-option label="待发货" value="pending"></el-option> </el-select> </div> </template> <template #default="{ row }"> ... </template> </el-table-column>自定义表头配合height固定表头时没有任何冲突，因为固定的是整个header-wrapper，内部单元格的高度会自动撑开。唯一需要注意的是，如果你用了筛选组件，比如下拉框、日期选择器，它们默认会追加到 body 尾部（Popover 或 Dropdown），如果表格外层容器设置了overflow: hidden，可能会把弹出层裁剪掉。这个问题的标准解法是在组件的popper-append-to-body设置为false或将下拉组件放进表格内部并调整层级，不过细节因组件而异，这里先提个醒。
5. 常见问题排查与避坑心得
5.1 问题速查表
| 问题现象 | 原因 | 解决方案 |
|---|---|---|
| 设置了 height 但表头仍跟着滚动 | 实际情况是外层容器产生了滚动，而非表格内部的 body-wrapper | 检查外层元素是否设置了 overflow 或页面本身在滚动；确认 height 值是否生效 |
| 表头与表体列宽错位 | 列宽未设置、容器隐藏后测量错误、数据异步加载 | 给每个列设置 width/min-width；数据更新后调用doLayout |
| 固定列区域出现阴影遮挡 | el-table 默认伪元素阴影 | 用 CSS 重置.el-table__fixed::before的 background 为 transparent |
| 表格高度一直不够，底部被截断 | height 计算值偏大或偏小 | 动态计算高度时考虑卡片 padding、底部预留高度，用nextTick后测量 |
| Tab 切换后表格表头错位 | 表格在隐藏容器中初始化，测量宽度不准确 | 在 tab 激活事件里doLayout |
| 设置了 max-height 但没有滚动条 | max-height 小于一行的实际高度时可能出现 | 确保 max-height 至少大于表头高度 + 一行内容高度 |
| 多级表头下固定列重叠 | 父级列和子级列 fixed 属性不统一 | 在固定列对应的所有层级都加上fixed |
5.2 动态数据场景下的表头抖动
有一种情况很隐蔽：接口返回数据后，表格的滚动区域高度会发生变化，表头区域偶尔会出现轻微抖动。这通常是表格容器宽度的变化导致的。Element UI 内部会根据内容宽度计算纵向滚动条是否出现，如果数据量在“刚好不滚”和“刚好要滚”之间反复横跳，就会出现表头微抖。
要规避这个问题，最直接的方法是：不要依赖内容撑开宽度，让表格的宽度始终等于容器宽度。可以给表格外层固定宽度，并设置所有列的宽度。此外，在拿到数据之后，加一个小小的防抖再渲染，也会让体验更稳定：
fetchData() { this.loading = true; api.getList(this.query).then(res => { // 延迟赋值，避免数据量变化引起的表头/表体抖动 setTimeout(() => { this.tableData = res.data.rows; this.loading = false; this.$nextTick(() => this.$refs.table.doLayout()); }, 0); }); }setTimeout延迟 0 毫秒只是把赋值放到下一个宏任务，给 DOM 一点缓冲时间，实际上多数场景不加也没问题。这里主要是强调$nextTick的重要性：数据一变，表格内部的布局更新是异步的，在更新之前去调用doLayout可能拿到的是旧状态。
5.3 我的页面结构经验总结
最后分享一个我在真实后台项目里用得最顺手的表格高度管理方式。核心思想是：不把表格高度写死在组件里，而是通过一个全局的页面容器高度计算函数来管理。
// 在公共 mixin 里维护 const tableHeightMixin = { data() { return { tableHeight: 600, cardTop: 0, headHeight: 100, // 顶部导航+面包屑等 footerHeight: 40, // 分页器高度 gapHeight: 24 // 卡片与卡片间距 }; }, mounted() { this.$nextTick(() => { this.calcTableHeight(); window.addEventListener('resize', this.calcTableHeight); }); }, beforeDestroy() { window.removeEventListener('resize', this.calcTableHeight); }, methods: { calcTableHeight() { const card = this.$refs.cardRef; if (!card) return; const { top } = card.getBoundingClientRect(); this.tableHeight = window.innerHeight - top - this.footerHeight - this.gapHeight; } } };使用的时候：
<el-card ref="cardRef" :body-style="{ padding: '0 20px 20px' }"> <el-table :height="tableHeight" :data="tableData">...</el-table> </el-card>这个 mixin 的好处是，无论你页面里嵌了多少筛选条件、切换了多少 Tab，只要卡片的top位置计算正确，表格的高度就永远是“刚好填满卡片剩余空间”，不会多也不会少，而且随窗口变化自动调整。当然，如果筛选区可以展开/收起，导致卡片顶部位置在运行时变化，需要在相关交互里重新调用一次calcTableHeight，或者用 ResizeObserver 监听卡片尺寸变化，这就属于更进一步的技术细节了。
6. 固定表头的更多扩展玩法
6.1 让固定表头在浏览器层面也具备粘性效果
Element UI 的height方案适合“表格自身区域内滚动”的场景，但还有一种场景是：整张页面只有一个很大的滚动条，整个表格就像一张长图一样嵌在页面里。此时用height显然不合适，因为表格区域高度会撑满内容高度，外层页面滚动时表头还是会跑。
这时候可以用到 CSS 的position: sticky。如果你只是希望能让表头在页面滚动时“吸顶”，在比较新的 Chrome/Edge/Firefox 里有一个后门方案：穿透到 El-Table 内部，设置表头容器为 sticky。
.el-table__header-wrapper { position: sticky; top: 0; z-index: 10; }这个 CSS 在多数情况下确实有效，但它有一个前提：El-Table 的 body-wrapper 和 header-wrapper 必须处于同一个滚动父容器中，而且父容器不能有overflow: hidden裁剪。如果外层滚动容器是window，这个方案基本可行；如果外层是某个el-scrollbar容器，就要仔细测一下各个浏览器的表现。
不过说句实在话，这个方案我没有大范围在生产环境使用过，因为 El-Table 内部的滚动逻辑和滚动条样式在 sticky 模式下会出现一些不可控的细节，比如滚动条位置错位、横向滚动和纵向滚动互相干扰。除非你有明确的理由不能给表格设置固定高度，否则我还是建议用height或max-height，这是官方规范路径，最稳妥。
6.2 覆盖 El-Table 内部滚动条样式
最后一个提升体验的点是滚动条样式。默认的滚动条又粗又丑，固定在右侧非常影响观感，特别是在一些定制化后台里。El-Table 的纵向滚动条隐藏在.el-table__body-wrapper内部，可以通过 CSS 伪元素调整：
.el-table__body-wrapper::-webkit-scrollbar { width: 6px; height: 6px; } .el-table__body-wrapper::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 3px; } .el-table__body-wrapper::-webkit-scrollbar-track { background: transparent; }设置完以后，滚动条会变成纤细的圆角样式，表头依然是固定状态，整体视觉效果干净许多。这个 CSS 在 Firefox 里需要改用scrollbar-width和scrollbar-color：
.el-table__body-wrapper { scrollbar-width: thin; scrollbar-color: #c0c4cc transparent; }组合起来，跨浏览器的表现就差不多统一了。
6.3 内容超出表头宽度的省略与 Tooltip
表头固定之后，数据列一般会配合show-overflow-tooltip属性，让超长文本显示省略号，鼠标悬停时出现 Tooltip 展示完整内容。这个属性在固定表头场景里一样好用：
<el-table-column prop="address" label="详细地址" min-width="200" show-overflow-tooltip ></el-table-column>这个属性的原理是给单元格内容套上一层ellipsis的容器，然后监听鼠标事件显示 Tooltip。使用的时候注意一点：不要让列的宽度过大或过小，适中即可，否则 Tooltip 可能会遮挡住下一列的内容。
写在最后的个人经验
我处理 El-Table 固定表头的经验可以浓缩成三句话：能用官方height就用官方height，别随便用 CSS 魔改；列宽尽量手动指定，宽度不够或测量时机不对时大概率列会错位；凡是涉及异步加载数据或容器由隐藏变可见的场景，都别忘在$nextTick里调用doLayout。
这三个原则帮助我在项目里避开了绝大多数的表格样式坑。希望这篇文章能让你少走几步弯路。如果你在实际项目里遇到了这里没提到的奇怪问题，建议先用开发者工具把 El-Table 的 DOM 结构完整看一遍，定位出是 header-wrapper 的问题还是 body-wrapper 的问题，再做针对性处理——调试表格的套路，万变不离其宗。
