eltable 文字放不下

eltable 文字放不下

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显示全部内容

placement="top"

v-model="w.showTooltip"

:open-delay="500"

effect="dark"

:disabled="!w.showTooltip">

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

showTips(obj, row){