【Vue3实战】El-Table实现“超过3行省略，悬停显示全文”的完美方案（附性能优化）

📝 前言

在后台管理系统中，el-table 是最常用的组件之一。经常遇到这样的需求：表格中的某列文本内容过长，限制只显示 3 行，超出部分显示省略号，并且鼠标悬停时通过 Popover 展示完整内容。

很多开发者第一反应是直接用 CSS 的 -webkit-line-clamp。确实，它能实现视觉上的省略，但它无法判断内容是否真的溢出了 。如果内容只有一行，CSS 依然会生效（虽然看不出效果），更致命的是，我们无法据此动态控制 el-popover 的显隐------导致用户在短文本上悬停时，也会弹出一个不必要的空白框或重复内容的框，体验极差。

今天分享一个基于 Vue 3 + Composition API 的通用解决方案，核心在于利用 DOM 的 scrollHeight 和 clientHeight 精准判断溢出状态。

💡 核心思路

CSS 截断 ：使用 line-height + max-height + -webkit-line-clamp 实现视觉上的 3 行省略。
JS 判断 ：
- scrollHeight：元素内容的实际总高度（包含被隐藏的部分）。
- clientHeight：元素可见区域的高度（受 max-height 限制）。
- 判定公式 ：若 scrollHeight > clientHeight，则说明内容溢出，需要开启 Popover；否则禁用 Popover。
性能优化：针对大数据量表格，采用"按需检测"策略（鼠标移入时才计算），避免首屏渲染卡顿。

🚀 代码实现

1. 模板结构 (Template)

利用 Element Plus 的 el-popover 组件，通过 :disabled 属性动态控制是否启用。

html 复制代码

<template>
  <div class="table-container">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="name" label="姓名" width="180" />
      
      <el-table-column label="详细描述" min-width="250">
        <template #default="{ row, $index }">
          <!-- 
            key点：
            1. :disabled="!overflowMap[$index]" -> 只有检测到溢出才启用弹窗
            2. trigger="hover" -> 悬停触发
          -->
          <el-popover
            placement="top-start"
            trigger="hover"
            :content="row.description"
            :disabled="!overflowMap[$index]"
            popper-class="custom-ellipsis-popover"
            :width="400"
          >
            <template #reference>
              <div
                ref="textRefs"
                class="ellipsis-text"
                :data-index="$index"
                @mouseenter="handleMouseEnter($index, $event)"
              >
                {{ row.description }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

2. 逻辑处理 (Script Setup)

使用 Vue 3 的组合式 API，利用 ref 数组获取 v-for 中的 DOM 节点。

javascript 复制代码

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';

// 模拟数据：包含短文本和长文本
const tableData = ref([
  { name: '张三', description: '这是一段很短的文字，不需要省略。' },
  { name: '李四', description: '这是一段非常长的文字。'.repeat(20) }, // 肯定溢出
  { name: '王五', description: '这是刚好三行的测试文字。'.repeat(4) }, 
  { name: '赵六', description: '中等长度内容。'.repeat(5) },
]);

// 存储每一行是否溢出的状态 Map: { index: boolean }
const overflowMap = reactive({});

// 存储所有文本 DOM 元素的引用 (v-for 中 ref 会自动变成数组)
const textRefs = ref([]);

/**
 * 核心判断函数
 * @param {number} index - 行索引
 * @param {HTMLElement} element - DOM 元素
 */
const checkOverflow = (index, element) => {
  if (!element) return;
  
  // 黄金法则：内容实际高度 > 容器可视高度
  const isOverflow = element.scrollHeight > element.clientHeight;
  
  // 更新状态，响应式驱动视图更新
  overflowMap[index] = isOverflow;
};

/**
 * 方案 A：按需检测（推荐用于大数据量）
 * 只有当鼠标移入且未计算过时，才执行检测
 */
const handleMouseEnter = (index, event) => {
  // 如果已经计算过该行的状态，直接返回，避免重复计算
  if (overflowMap.hasOwnProperty(index)) return;
  
  const el = event.target;
  checkOverflow(index, el);
};

/**
 * 方案 B：初始化批量检测（适用于小数据量，体验更丝滑）
 * 如果需要一加载就显示省略号样式或光标变化，可取消下面注释
 */
// onMounted(() => {
//   nextTick(() => {
//     textRefs.value.forEach((el, index) => {
//       checkOverflow(index, el);
//     });
//   });
// });

// 监听数据变化（如果是异步加载数据，需要重新检测）
// watch(tableData, () => { nextTick(() => { /* 重新检测逻辑 */ }) }, { deep: true });
</script>

3. 样式定义 (Style)

注意：必须设置固定的 line-height，否则高度计算会失效。

css 复制代码

<style scoped>
.ellipsis-text {
  /* 1. 必须设置固定行高，假设一行 24px */
  line-height: 24px; 
  
  /* 2. 限制最大高度为 3 行 (24px * 3 = 72px) */
  max-height: 72px;
  
  /* 3. 隐藏溢出内容 */
  overflow: hidden;
  
  /* 4. 多行省略核心 CSS */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示3行 */
  -webkit-box-orient: vertical;
  
  /* 5. 防止长单词/URL不换行导致高度计算异常 */
  word-break: break-all; 
  overflow-wrap: break-word;
  
  /* 默认光标 */
  cursor: default; 
  
  /* 可选：过渡效果 */
  transition: color 0.3s;
}

/* 当检测到溢出时，可以通过动态类名改变样式提示用户 */
.ellipsis-text.is-overflow {
  cursor: pointer;
  color: #409EFF; /* 溢出时变蓝 */
}
</style>

🔍 关键技术点解析

1. 为什么不用纯 CSS？

纯 CSS (-webkit-line-clamp) 只能做视觉截断，无法提供"是否截断"的状态反馈。我们需要这个状态来决定 el-popover 的 disabled 属性，从而避免在短文本上出现多余的交互。

2. `scrollHeight` vs `clientHeight`

这是浏览器原生的 DOM API：

scrollHeight：即使内容被 overflow: hidden 隐藏，它依然返回内容撑开的真实高度。
clientHeight：返回元素在当前视口可见的高度（受 max-height 限制）。
结论：只要 scrollHeight 大于 clientHeight，就说明有内容被藏起来了。

3. Vue 3 中 `ref` 在 `v-for` 的用法

在 Vue 3 中，ref 绑定在 v-for 元素上时，会自动变成一个数组。

javascript 复制代码

const textRefs = ref([]);
// 访问第 i 行的元素
textRefs.value[i]

这使得我们可以轻松遍历所有行进行批量检测。

4. 性能优化策略

小数据量 (< 50 条) ：建议在 onMounted 中配合 nextTick 一次性计算所有行。这样用户无需鼠标移入就能看到完整的省略号样式（如变色、手型光标）。
大数据量 (> 100 条) ：建议采用代码中的 @mouseenter 按需计算。只有用户鼠标扫过的行才会触发 DOM 读取和计算，极大减少首屏渲染压力。

⚠️ 常见坑点与排查

行高不一致：
- 现象：明明没溢出却判断为溢出。
- 原因：CSS 中的 line-height 被全局样式覆盖，或者 JS 计算时依赖的隐式行高与实际渲染不符。
- 解决：务必在 .ellipsis-text 中显式写死 line-height，不要依赖继承。
异步数据不更新：
- 现象：接口返回数据后，省略号逻辑没生效。
- 原因：DOM 还没渲染完成就执行了检测。
- 解决：确保在 nextTick 中执行检测逻辑，或者监听 tableData 的变化。
Popover 位置偏移：
- 解决：确保 <template #reference> 包裹的是单个根元素（上面的 div），不要包裹多个节点。

📊 总结

通过结合 CSS 的视觉截断能力和 JS 的 DOM 测量能力，我们可以完美实现"智能省略"功能。这不仅提升了界面的整洁度，还通过按需展示详情优化了用户体验。