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

标签：el const tooltip element ev 溢出

用到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>

 

 

标签：el,const,tooltip,element,ev,溢出
From： https://www.cnblogs.com/shyhuahua/p/18083220