需求背景
最近来了一个需求,在一个el-table里边的某一列渲染一个 ‘介绍’ 的内容,由于内容过多,全部展示显示的不是很美观,所以就给定了个需求让超出两行后显示省略号,并在鼠标移上去之后显示全部内容。
我首先想到的就是使用el-tooltip来实现,但是在使用过程中试了很多方法,其中有些并不友好,最后选了一个本人认为相对合适的。
本文用来记录和学习,仅代表自己的观点,希望能帮助到别人,也希望大佬可以指正不足之处使我进步。
废话不多说,直接上代码。
实现过程
html:
<el-table-column label="介绍" prop="intro">
<template slot-scope="scope">
<p v-if="!scope.row.intro">-</p>
<el-tooltip v-if="scope.row.intro" :disabled="showTip" effect="dark" :content="scope.row.intro" placement="top">
<div class="designer-inner">
<div
@mouseenter="showTips($event,scope.row)"
@mouseleave="hiddenShowTips($event,scope.row)"
class="box-cont">
{{ scope.row.intro }}
</div>
</div>
</el-tooltip>
</template>
</el-table-column>
在data里边定义好变量:
data: function () {
return {
showTip: true,//控制el-tooltip的禁用
}
}
js:
接下来是js的部分,我的思路是获取文字内容容器的高度,当文字超过两行的高度时就进行相应的禁用或者启用el-tooltip(这里的高度可以根据自身的需求进行改变)。文章来源:https://www.toymoban.com/news/detail-774848.html
showTips: function(el, row) {
if (el.target.scrollHeight > 46) { //这里我的两行高度为46,可以根据自身需求进行更改
this.showTip = false;
} else {
this.showTip = true;
}
},
hiddenShowTips: function(el, row) {
this.showTip = true;
},
通过鼠标的划入和划出事件,获取文字容器,使用el-tooltip的disabled属性来巧妙的进行显示隐藏。
css:
最后通过css来实现省略号的显示。文章来源地址https://www.toymoban.com/news/detail-774848.html
.box-cont {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //超过两行时显示省略号
}
到了这里,关于element ui 中在el-table内,当内容超过多少行时,显示el-tooltip的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!