返回博客

el-table fixed=right 弹窗内「幽灵列」透视：双 tbody + stacking context 串味

在某个后台管理系统的列表页，产品反馈了一个奇怪的视觉 bug：打开弹窗后，表格最右侧的「操作」列（fixed="right"）下方偶尔会透出一段明显错位的内容——不是 1px 的抖动，而是整整一列 200 多像素，里面显示的竟然是相邻数据列的真实数据。鼠标在行间快速扫动时现象尤其明显，停止后又消失了。

现象

  • <el-dialog> 内嵌 <el-table>，操作列配置了 fixed="right"
  • 弹窗宽度不够大时，主表出现横向滚动条
  • 鼠标 hover 切换行时，操作列视觉区域下方短暂「透出」来自其它列的字段内容
  • 内容整列错位（200px+ 级别），不是微抖动
  • 已经加过 ::v-deep .el-table__fixed-right { background: #fff } 的补丁，无效

根因

Element UI 2.x 的 fixed="right" 列在 DOM 层面是独立渲染的：它生成一个 .el-table__fixed-right 容器节点，内含自己的 colgroup、thead、tbody，用 position: absolute 覆盖在主表右侧。

这个设计本身没问题，但和下面两个条件叠加就炸了：

  1. 容器太窄触发横向滚动：当 <el-dialog width> 不够放下所有列宽之和时，主表的 .el-table__body-wrapper 会出现 overflow-x: scroll。此时用户（或程序）滚动主表，主表的中段列会滑到 fixed-right overlay 的视觉正下方——而 overlay 是静止的。

  2. 全局 tr:hover { transform } 创建 stacking context：vue-element-admin 等流行模板里通常有全局样式 .el-table tr:hover { transform: translateY(-1px) }，这条 transform 会让每个 <tr> 在 hover 时创建独立的 stacking context。主表 tbody 和 fixed-right overlay tbody 各自在 hover 时生成 stacking context，两者渲染时序不一致，导致主表内容在 z-index 竞争中短暂「从 fixed-right 的缝隙里冒出来」，即整列 200px 错位的幽灵内容。

坑：加背景色遮挡治不了横向滚动场景

::v-deep .el-table__fixed-right { background: #fff } 只能掩盖「主表无横向滚动时」的轻微透底，一旦主表出现横向滚动条，中段列已经物理上滑到了 fixed-right 下方，背景色挡不住来自 stacking context 时序错乱的「幽灵列」。这个补丁在弹窗场景里是无效的。

正解

核心思路：消除横向滚动。 fixed-right overlay 本身没有 bug，只要主表不出现横向滚动，overlay 下方就是空白，没东西可以透出来。

方案 A — 拓宽弹窗（推荐，5 分钟搞定）

精确算账：dialog content area = dialog width - body padding × 2（el-dialog 默认每边 30px，合计 60px）。所有 el-table-column width 之和必须小于等于 content area，留 20–30px 缓冲。

-<el-dialog width="900px">
+<el-dialog width="1140px">
   <el-table>...</el-table>
 </el-dialog>

方案 B — 合并相邻窄列（搭配 A 减少总列宽）

把信息密度低的两列合成「双行单列」，实测可省 70–100px：

<!-- 旧：上报人 80px + 时间 145px = 225px -->
<el-table-column prop="reporter" label="上报人" width="80" />
<el-table-column prop="created_at" label="时间" width="145" />
 
<!-- 新：合并为 150px，节省 75px -->
<el-table-column label="上报人 / 时间" width="150" align="center">
  <template slot-scope="{ row }">
    <div>{{ row.reporter || '-' }}</div>
    <div style="color: #909399; font-size: 12px; line-height: 1.4">
      {{ row.created_at }}
    </div>
  </template>
</el-table-column>
正解：拉宽容器，让 scrollWidth === clientWidth

修复验证：打开弹窗，在 DevTools 控制台执行：

const wrap = document.querySelector('.el-table__body-wrapper')
console.log(wrap.scrollWidth - wrap.clientWidth) // 应为 0 或负数

结果为 0，说明横向滚动已消除，幽灵列不会再出现。

注意：算列宽别漏 dialog padding

el-dialog 默认 body padding: 30px，两边合计 60px。一张列宽合计 1080px 的表格实际需要 width="1140px" 的弹窗。同时留意团队最低支持分辨率——1140px 弹窗在 1280px 宽屏上没问题，在 1024px 屏上会让弹窗本身出现横向滚动。

排查备忘

  • 已有 ::v-deep 补丁 ≥ 3 轮仍未彻底解决 → 必须停止叠 CSS，检查布局根因（先查是否存在横向滚动）。
  • min-width 列算总宽时按 min-width 值算，不是实际渲染宽度。
  • Element UI 2.x 已停止维护，不会从框架层修这类问题，只能在业务层治根。

一句话外卖

el-table fixed 列的「幽灵列」不是 CSS 透明度问题，而是布局问题——消除横向滚动才是唯一根治手段，加背景遮挡只是掩耳盗铃。