el-table表格超长数据隐藏显示悬浮框，支持文本复制。

---

el-table 超长文本想复制？别再用 show-overflow-tooltip 了

做后台管理系统，几乎逃不掉这个需求：

表格里有一列超长单号 / 描述 / JSON
显示省略号
鼠标移上去看完整内容
顺便能复制

听起来很合理，但只要你用过 show-overflow-tooltip，大概率会遇到一个诡异现象：

👉 鼠标一试图选中文字，提示框就消失了。

今天把这个问题彻底讲清楚，并给你 3 种能用的解法。

---

一、为什么 show-overflow-tooltip 不能复制？

它的真实实现方式

show-overflow-tooltip 并不是“专门为你准备的 tooltip”，而是一个极简实现：

<el-tooltip>

并且：

• 显示：鼠标 hover 单元格
• 隐藏：鼠标离开单元格
• 提示框是 独立 DOM，不在单元格内部

问题就在这里

当你想把文字选中时：

鼠标 ↓
离开单元格
→ tooltip 触发 hide
→ popper 消失
→ 复制失败

这是一个交互逻辑冲突，不是样式问题。

Element UI 官方其实早就有定论：

✅ 已知问题
❌ 暂无修复计划

---

二、社区方案：vue-element-table-tooltip

这是目前最省事的方案，专门解决这个痛点。

安装

npm install --save vue-element-table-tooltip

全局注册

import Vue from 'vue'
import elementTableTooltip from 'vue-element-table-tooltip'

Vue.use(elementTableTooltip, { theme: 'dark' })

使用方式

<el-table-column
  label="订单备注"
  prop="remark"
  v-element-table-tooltip>
</el-table-column>

✅ 效果：

• 超长自动省略
• hover 显示 tooltip
• tooltip 不闪
• 鼠标可以安心选中文本 → Cmd/Ctrl+C

👉 原理上，它把 tooltip 的显示/隐藏判定改成了：
基于 popper 本身 hover，而不是只依赖单元格

---

三、如果你不想引第三方库（最常用自定义方案）

很多项目其实只想要一个“可控版本”，那直接用 el-tooltip 自己包一层。

模板写法

<el-table-column label="支付单号" width="140">
  <template #default="{ row }">
    <el-tooltip
      :content="row.pay_sn"
      placement="top"
      effect="dark"
    >
      <div class="ellipsis">{{ row.pay_sn }}</div>
    </el-tooltip>
  </template>
</el-table-column>

关键 CSS

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

/* 让 tooltip 里的文字可选中 */
.el-tooltip__popper {
  user-select: text;
  -webkit-user-select: text;
}

✅ 这样你已经解决了 80% 的问题。

---

四、为什么 user-select 这么重要？

默认情况下：

.el-tooltip__popper {
  user-select: none;
}

这是组件库的“防误触设计”：

• 防止拖拽时选中文字
• 防止 tooltip 被当成文本区域

但副作用就是：

你以为是内容不能复制
其实是浏览器根本不让你选

加上这句：

user-select: text;

浏览器才会允许你拖蓝。

---

五、一个更细腻的体验优化（推荐）

如果你发现：

• tooltip 消失还是有点快
• 或者想让 tooltip 更大一点

可以这样：

.el-tooltip__popper {
  max-width: 400px;
  user-select: text;
  pointer-events: auto; /* 关键 */
}

pointer-events: auto 有两个作用：

1. tooltip 能接住鼠标
2. hover 到 tooltip 上不会触发 hide

⚠️ 注意：
Element Plus 里这个默认已经是 auto，Element UI 老版本需要手动加。

---

六、什么时候用哪种方案？

给你一张决策表：

场景	推荐方案
老项目，不想动太多代码	show-overflow-tooltip + 放弃复制
需要复制，但不想改结构	vue-element-table-tooltip
需要完全控制样式 / 宽度	自定义 el-tooltip
新项目（Element Plus）	show-overflow-tooltip + CSS 覆盖

---

七、Element Plus 用户注意

如果你是 Element Plus（Vue 3）：

<el-table-column
  prop="remark"
  label="备注"
  show-overflow-tooltip
/>

现在 tooltip 内部已经可以选中文本了，只需要补一句 CSS：

.el-popper {
  user-select: text;
}

👉 官方在新版里已经优化了 popper 的 hover 判定。

---

八、一个常见误区

❌ 有人会这样写：

<div :title="row.pay_sn" class="ellipsis">
  {{ row.pay_sn }}
</div>

浏览器原生 title：

• 不能复制（部分浏览器可以，体验极差）
• 不能控制样式
• 延迟高

✅ 不要用 title 代替 tooltip。

---

九、总结

el-table 里“能看不能选”，从来不是你的错，是 show-overflow-tooltip 的设计问题。

• 想省事 → vue-element-table-tooltip
• 想可控 → 自己包 el-tooltip
• 别忘了 user-select: text