Element UI 表格 show-overflow-tooltip 长文本导致闪烁的根本原因与解法

问题复现

在 Element UI (Vue 2) 项目中，el-table-column 开启 show-overflow-tooltip 展示超长文本（500字+）。 现象： 鼠标悬停单元格，Tooltip 疯狂闪烁（显示-消失-显示循环），侧边滚动条也跟随闪烁（副作用）。 关键环境信息： 页面原本就有滚动条（无布局重排），但依然闪烁。

排查与验证

初步排查： 曾怀疑是 Tooltip 撑开页面导致滚动条出现进而挤压布局。但经过验证，页面滚动条一直存在，布局并未发生位移，因此排除"重排（Reflow）"导致的坐标变化。

核心对照实验：

自动模式 ：使用 show-overflow-tooltip -> 闪烁。
手动模式 ：在 template 中使用 <el-tooltip> 包裹内容，不限制宽高 -> 不闪烁。

根本原因分析

既然布局没动，为什么会自动关闭？答案是 Tooltip 自身的遮挡与事件逻辑缺陷。

1. 遮挡触发 (Occlusion)

由于文本极长，Tooltip 渲染尺寸巨大。在特定分辨率下，Popper.js 计算出的定位会导致 Tooltip 弹出的一瞬间，其 DOM 元素直接覆盖（Overlap）在了鼠标光标之上。

2. 机制差异

show-overflow-tooltip (Table 内置逻辑) ：Element UI 的 Table 组件使用单例模式 维护一个全局 Tooltip。它主要监听单元格（Cell）的 mouseleave 事件。Bug 流程： Tooltip 弹出盖住鼠标 -> 浏览器判定鼠标离开单元格（进入 Tooltip） -> 触发 Cell 的 mouseleave -> Table 的处理逻辑较为脆弱，在判定"鼠标是否进入 Tooltip"时出现时序问题或逻辑漏洞 -> 直接关闭 Tooltip 。 Tooltip 关闭 -> 鼠标重新落回单元格 -> 触发 mouseenter -> 死循环。
手动 <el-tooltip> (独立组件) ：手动模式下，每个单元格拥有独立的 Tooltip 实例。该组件内部对 enterable（鼠标进入浮层）有完善的处理机制。 正常流程： Tooltip 弹出盖住鼠标 -> 组件检测到鼠标虽然离开了 Reference（触发源），但进入了 Popper（浮层） -> 保持显示状态。

结论与解决方案

show-overflow-tooltip 是一个为了性能牺牲了部分交互稳定性的"阉割版"实现，无法完美处理"弹出层直接遮挡触发源"的极端情况。

最佳解法： 放弃 show-overflow-tooltip，使用 Slot 手动接管。

HTML 复制代码

<el-table-column label="详情" width="300">
  <template slot-scope="scope">
    <el-tooltip 
      effect="dark" 
      :content="scope.row.detail" 
      placement="top"
      popper-class="my-popper"
    >
      <div class="ellipsis-cell">{{ scope.row.detail }}</div>
    </el-tooltip>
  </template>
</el-table-column>

建议优化： 虽然手动挡不限制宽高也不会闪烁，但为了阅读体验，建议通过 CSS 限制最大高度。

CSS 复制代码

/* 全局样式 */
.my-popper {
  max-width: 400px;
  max-height: 300px;
  overflow-y: auto;
}

总结

当排查"幽灵闪烁"问题时，如果页面布局未动，请重点关注层级遮挡导致的鼠标事件丢失。对于复杂场景，手动控制的组件永远比自动的语法糖更可靠。