一、需求：如何判斷當前文本文字是否超出文本長度，是否需要出現提示toolTip。效果圖如下：

二、實現：

1、表格字段鼠標放置el-popover出現 “引用主題” 的具體內容；

<!-- 表格字段：引用主題 -->
<el-table-columnalign="center"header-align="center"width="100"label="引用主題"sortable="custom"prop="refCnt"show-overflow-tooltip
>
<template slot-scope="scope"><span v-if="scope.row.refCnt == '0'" style="color: #f56c6c">0</span><el-popoverv-elseplacement="bottom"width="150"trigger="hover"><ul :data="scope.row?.themeVos" class="ul-popover"><li v-for="(item, index) in scope.row?.themeVos" :key="index"><el-tooltipclass="item"effect="light":content="item?.themeName"placement="top-start":disabled="!isShowTooltip"><!-- visibilityChange：鼠標放置后是否展示省略部分；--><!-- class="overflow"：是否超出隱藏出現省略號； --><div @mouseenter="visibilityChange($event)" class="overflow">{{ item?.themeName }}</div></el-tooltip></li></ul><spanstyle="color: #1989fe; cursor: pointer"slot="reference">{{ scope.row.refCnt }}</span></el-popover></template>
</el-table-column>

2、定義isShowTooltip控制是否展示提示文字tooltip;

data() {return {isShowTooltip: false, // 是否顯示提示文字}
}

3、對應的鼠標放置觸發的方法實現；

 // 是否提示toolTipvisibilityChange(event) {const ev = event.targetconst ev_weight = ev.scrollWidth // 文本的實際寬度   scrollWidth：對象的實際內容的寬度，不包邊線寬度，會隨對象中內容超過可視區后而變大。const content_weight = ev.clientWidth // 文本的可視寬度 clientWidth：對象內容的可視區的寬度，不包滾動條等邊線，會隨對象顯示大小的變化而改變。// const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器寬度(父節點)if (ev_weight > content_weight) {// 實際寬度 > 可視寬度  文字溢出this.isShowTooltip =true} else {// 否則為不溢出this.isShowTooltip = false}},