elementui table 中 show-overflow-tooltip=“true” 只能有一行隐藏有时候无法满足需求时
html
<el-table-column label="">
<template slot-scope="scope">
<el-tooltip
popper-class="tip-cell"
placement="top"
v-model="scope.row.showTooltip"
:open-delay="500"
effect="dark"
:disabled="!scope.row.showTooltip"
>
<div slot="content">
{{ scope.row.content }}
</div>
<div
@mouseenter="
showTips($event, scope.row)
"
class="myNote"
>
{{ scope.row.content }}
</div>
</el-tooltip>
</template>
</el-table-column>
js
showTips(obj, row) {
/* obj为鼠标移入时的事件对象 */
/* currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除 */
let TemporaryTag = document.createElement("span");
TemporaryTag.innerText = row.content;
/* 去除文本中的html 标签变成纯字符串 */
TemporaryTag.innerText = TemporaryTag.innerText.replace(
/<[^>]+>/g,
""
);
TemporaryTag.className = "getTextWidth";
document.querySelector("body").appendChild(TemporaryTag);
let currentWidth = document.querySelector(".getTextWidth")
.offsetWidth;
document.querySelector(".getTextWidth").remove();
/*cellWidth为表格容器的宽度*/
const cellWidth = obj.target.offsetWidth;
/* 当文本宽度小于||等于容器宽度两倍时,代表文本显示未超过两行 */
currentWidth <= 2 * cellWidth
? (row.showTooltip = false)
: (row.showTooltip = true);
}
css
// 限制tip 显示宽度
.tip-cell {
max-width: 500px;
}
// 控制文本显示函数
.myNote {
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}