需求：
设置固定宽度。
文字超出宽度，用...显示。鼠标悬停到文字上，用el-tooltip显示全部文字内容
如果文字未超出宽度，el-tooltip隐藏。
解决方法：
html
<el-tooltip effect="dark"
:content="contentHover" // 第一步：鼠标悬停后显示的内容
placement="top-end"
:disabled="isShowTooltip" // 第二步：关闭文字提示功能
>
<div class='linkTo' @mouseover="onMouseOver(name)"> // 第三步：鼠标移入事件，很关键
<span :ref='name'>{{name}}</span>// 第四步 绑定ref
</div>
</el-tooltip>
data
data(){
return{
name: '这里是需要展示的所以文字内容'，
isShowTooltip: false,
contentHover: '',
}
}
methods
methods:{
onMouseOver(str) { // 内容超出，显示文字提示内容
const tag = this.$refs[str]
const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
const contentWidth = tag.offsetWidth // 获取元素可视宽度
this.isShowTooltip = contentWidth <= parentWidth
// 鼠标悬停后显示的内容
this.contentHover = this.name
}
}
css
.linkTo {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
