针对table中设置超过两行显示省略号,显示tooltip时,tabel的属性showtooltip失效问题,做出调整
展示tooltip
//在调用的地方引入此方法即可(引入的要点已注释)
//注:如果接口返回的是码表可传入list(码表)
//此方法中list格式必须为list:[{value:"1",label:"内容"}]
//obj为鼠标移入时的事件对象
//row为当前行
//key为当前单元格的对应字段名
//currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后移除
重点:经实验发现对比长度不太精确,所以需要给temporary添加和表格内容相同大小的font-size
showTips(obj, row, key, list) {
let content = "";
if (list) {
let currentItem = list.filter((item) => {
return item.value == row[key];
});
if (currentItem) {
content = currentItem[0].label;
} else {
content = "";
}
} else {
content = row[key];
}
let TemporaryTag = document.createElement("span");
TemporaryTag.style.fontSize = "14px";
TemporaryTag.innerText = content;
TemporaryTag.className = "getTextWidth";
document.querySelector("body").appendChild(TemporaryTag);
let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
document.querySelector(".getTextWidth").remove();
/*cellWidth为表格容器的宽度*/
const cellWidth = obj.target.offsetWidth;
/*当文本宽度小于||等于容器宽度两倍时,代表文本显示未超过两行*/
if (currentWidth < 2 * cellWidth) {
this.$set(row, "show" + key + "Tooltip", false);
} else {
this.$set(row, "show" + key + "Tooltip", true);
}
}
<el-table-column prop="templateName" label="模板名称" width="180">
<template slot-scope="scope">
<Tooltip
transfer
placement="bottom-start"
:delay="50"
max-width="400"
:disabled="!scope.row['showtemplateNameTooltip']"
transfer-class-name="bd"
>
<!-- 只需要保证!scope.row[]中的show...Tooltip中间的...与当前行的prop相同即可 -->
<span
@mouseenter="showTips($event, scope.row, 'templateName')"
class="showToolTips"
style="
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
"
>{{ scope.row.templateName }}</span
>
<div
slot="content"
style="
whitespace: normal;
max-width: 400px;
word-break: break-all;
"
>
{{ scope.row.templateName }}
</div>
</Tooltip>
</template>
</el-table-column>
.showToolTips {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}