需求背景

最近来了一个需求，在一个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（这里的高度可以根据自身的需求进行改变）。

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来实现省略号的显示。

.box-cont {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //超过两行时显示省略号
}