在實際開發中，我們經常需要在表格中展示較長的文本內容，但又希望保持界面的整潔美觀。本文將介紹如何在Vue3 和 Element Plus中實現表格多行文本截斷，并智能控制Tooltip的顯示——只有當文本被截斷時才顯示Tooltip，否則不顯示。

需求分析

目標是打造一個用戶體驗友好的表格，對于“描述”這一列實現以下功能：

1. 多行文本截斷：當描述文本限制為固定行數（如2行），超出行數的部分顯示為省略號
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 的顯示。
如果你在項目中遇到類似需求，可以直接使用這個方案，或者根據具體需求進行調整。如果你有任何問題或建議，歡迎在評論區留言討論！