Vue3 + Element Plus实现表格多行文本截断与智能Tooltip提示
在实际开发中，我们经常需要在表格中展示较长的文本内容，但又希望保持界面的整洁美观。本文将介绍如何在Vue3 和 Element Plus中实现表格多行文本截断，并智能控制Tooltip的显示——只有当文本被截断时才显示Tooltip，否则不显示。
需求分析
目标是打造一个用户体验友好的表格，对于“描述”这一列实现以下功能：
- 多行文本截断：当描述文本限制为固定行数（如2行），超出行数的部分显示为省略号
- 智能Tooltip： 仅当文本被截断时显示Tooltip，否则不显示
技术选型与实现思路
CSS多行文本截断
利用CSS的-webkit-line-clamp属性可以很方便地实现多行文本截断功能。它需要配合以下属性一起使用：
cursor: pointer;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 这里设置为2行，根据需求调整*/max-height: 3em;line-height: 1.5;text-overflow: ellipsis;word-break: break-word;
Tooltip条件显示
借助Vue的条件渲染（v-if等指令），根据文本内容是否超出两行的判断结果，来决定是否显示Tooltip组件。需要通过JavaScript来计算文本所在容器的实际高度和内容高度，以此判断是否超出两行。
代码实现
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElTable, ElTableColumn, ElButton, ElDialog, ElForm, ElFormItem, ElInput,ElMessage,ElTooltip
} from 'element-plus'
import { Plus } from '@element-plus/icons-vue'interface TableItem {id: numbername: stringhobby: stringdescription: string
}// 表格数据
const tableData = ref<TableItem[]>([{ id: 1, name: '张三', hobby: '读书', description: '喜欢阅读各种类型的书籍，特别是文学作品和技术书籍。经常在业余时间去图书馆或书店，认为读书是最好的放松方式。' },{ id: 2, name: '李四', hobby: '运动', description: '热爱各种体育运动，包括跑步、游泳、篮球等。每周至少运动三次，保持良好的身体状态和健康的生活习惯。' },{ id: 3, name: '王五', hobby: '音乐', description: '对音乐有着深厚的兴趣，会弹奏钢琴和吉他。' }
])// tooltip 状态管理
const tooltipStates = ref<Record<number, boolean>>({})
const descriptionRefs = ref<Record<number, HTMLElement>>({})
// 设置描述文本的引用
const setDescriptionRef = (el: HTMLElement | null, id: number) => {if (el) {descriptionRefs.value[id] = el}
}// 检查文本是否溢出
const checkTextOverflow = (id: number, text: string) => {const element = descriptionRefs.value[id]if (!element) return// 检查是否有文本溢出const isOverflowing = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidthtooltipStates.value[id] = isOverflowing
}</script><template><div class="static-table-container"><div class="header"><h2>用户信息管理</h2></div><!-- 数据表格 --><el-table :data="tableData" style="width: 100%" stripeborder><el-table-column prop="id" label="ID" width="80" align="center"/><el-table-column prop="name" label="姓名" width="150"align="center"/><el-table-column prop="hobby" label="爱好" align="center"/><el-table-column prop="description" label="描述" width="300"align="left"><template #default="{ row }"><div class="description-text":ref="el => setDescriptionRef(el, row.id)"@mouseenter="checkTextOverflow(row.id, row.description)"><el-tooltipv-if="tooltipStates[row.id]":content="row.description"placement="top":show-after="300":hide-after="200"><span>{{ row.description }}</span></el-tooltip><span v-else>{{ row.description }}</span></div></template></el-table-column></el-table></div>
</template><style scoped>
.static-table-container {padding: 20px;max-width: 800px;margin: 0 auto;
}.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 1px solid #ebeef5;
}.header h2 {margin: 0;color: #303133;font-size: 24px;font-weight: 600;
}/* 表格样式优化 */
:deep(.el-table) {border-radius: 8px;overflow: hidden;
}:deep(.el-table th) {background-color: #f5f7fa;color: #606266;font-weight: 600;
}:deep(.el-table td) {padding: 12px 0;
}/* 描述文本样式 */
.description-text {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.5;max-height: 3em; /* 2行的高度 */word-break: break-word;cursor: pointer;
}.description-text:hover {color: #409eff;
}
</style>
效果如下
总结
本文介绍了如何在 Vue 3 和 Element Plus 中实现表格多行文本截断与智能 Tooltip 展示功能。通过 CSS 实现多行截断，通过 JavaScript 动态判断文本是否溢出，从而智能控制 Tooltip 的显示。
如果你在项目中遇到类似需求，可以直接使用这个方案，或者根据具体需求进行调整。如果你有任何问题或建议，欢迎在评论区留言讨论！