vue3+element plus 判断文字是否溢出，溢出显示el-tooltip

用到element plus 表格，:show-overflow-tooltip="true" 属性在  "element-plus": "2.2.27", 版本不支持修改el-tooltip文本的样式：

 

满足2点需求：①文字只有一行不显示悬浮框；②超出一行显示省略号，鼠标有悬浮框，且保留文本的换行效果。

关键代码：

<el-table-column label="建议内容" align="center" prop="suggestion">
    <template #default="scope">
        <el-tooltip placement="top" :disabled="!isShowTooltip" effect="light">
            <template #content>
                <div class="all-content">{{ scope.row.suggestion }}</div>
            </template>

            <div class="ellipsis-text" @mouseenter="visibilityChange($event)">{{ scope.row.suggestion }}</div>
        </el-tooltip>
    </template>
</el-table-column>

const isShowTooltip = ref(false);
// 判断是否显示 溢出的文本 el-tooltip
const visibilityChange = (event) => {
    const ev = event.target;
    const evWeight = ev.scrollWidth;
    const contentWeight = ev.clientWidth;
    // console.log(ev, evWeight, contentWeight, 1);
    if (evWeight > contentWeight) {
        // 实际宽度 > 可视宽度  文字溢出
        isShowTooltip.value = true;
    } else {
        // 否则为不溢出
        isShowTooltip.value = false;
    }
};



// css

<style lang="scss" scoped>

.ellipsis-text {

    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    cursor: pointer;

}

.all-content {

    max-width: 600px;

    font-size: 14px;

    white-space: pre-wrap;

}

</style>