element-UI table文字超出两行，隐藏多余文字，移入显示tips

element-UI表格的列属性超出两行隐藏多余文本，移入时tips显示全部内容超出的文本的隐藏文本超过两行，移入时tips显示全部内容通过长度判断

element-UI表格的列属性

通过设置 :show-overflow-tooltip=“true” 这个属性可以达成超出一行的文字用省略号替代，并带有移入时tips显示全部内容的需求。但是如果想要文本超出两行、三行的需求，显然设置这个属性是无法完成的。

超出两行隐藏多余文本，移入时tips显示全部内容

我们想完成的是超出两行才用省略号隐藏多余文本，并且移入才会有tips显示；两行以内的文本则不隐藏也不显示tips。

超出的文本的隐藏

.myNote{ display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp: 2; -webkit-box-orient:vertical; }

文本超过两行，移入时tips显示全部内容

<!-- tips悬浮提示 --> <el-tooltip placement="top" v-model="scope.row.showTooltip" :open-delay="500" effect="dark" :disabled="!scope.row.showTooltip"> <div slot="content">{{scope.row.note}}</div> <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div> </el-tooltip>

注意！ 显示悬浮提示时v-model 和 disabled属性要一起使用才有效果。

showTips(obj, row){ /*obj为鼠标移入时的事件对象*/ /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/ let TemporaryTag = document.createElement('span'); TemporaryTag.innerText = row.note; 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 }

通过长度判断

一开始我是想通过表格高度去判断，但是后来发现，高度不是一个固定不变的值，会随着移入移出变化，并且其他列的高度超出也会影响到一整行的高度。所以最后还是通过文本宽度来判断，把文本宽度与容器宽度比较，这样得到的值才是固定不变的。