当我们在table中的某列内容过多时,会撑开td的高度,导致非常的难看
本文介绍的是,当内容超过两行时,超出的部分用 … 代替,并且鼠标悬浮时,会显示出所有的内容
但是当内容未超过两行时,鼠标悬浮时不显示Tooltip
下面先看效果
template
<el-table-column label="项目名称" min-width="25%" align="left">
<template slot-scope="scope">
<el-tooltip
placement="bottom"
v-model="scope.row.showTooltip"
effect="light"
:disabled="!scope.row.showTooltip"
>
<div slot="content">{{scope.row.itemName}}</div>
<div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.itemName}}</div>
</el-tooltip>
</template>
</el-table-column>
注意! 显示悬浮提示时v-model 和 disabled属性要一起使用才有效果。
加上鼠标移入事件控制方法的触发时间
methods
showTips(obj, row){
/*obj为鼠标移入时的事件对象*/
/*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/
let TemporaryTag = document.createElement('span');
TemporaryTag.innerText = row.itemName;
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
},
粘贴这部分代码的时候注意修改第五行中的内容(跟自己的业务符合)
style
.myNote{
display:-webkit-box;
text-overflow:ellipsis;
overflow:hidden;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
}
webkit-line-clamp 你可以随意控制几行,不一定非得是两行,看实际业务
!!!!!!注意showTooltip必须从后端传过来,否则当操作表格,例如翻页后,这个功能会失效!!!!!!