按理说 show-overflow-tooltip时文字溢出便出现提示框,只需要加个延迟就可以,我没有试过,应该会简便许多,下边可以直接粘贴
<el-table-column
prop="name"
label="名字"
width="210"
align="center"
>
<template slot-scope="scope">
<el-tooltip
:open-delay="parseInt(openDelay)"//鼠标悬停几秒才出现
:content="scope.row.name"
placement="top"
:disabled="tooltipDisabled"
>
<div
ref="elipsisDom"
class="text-ellipsis"
@mouseenter="spanMouseenter($event)"
>
{{ scope.row.name}}
</div>
</el-tooltip>
</template>
</el-table-column>
export default {
data() {
return {
tooltipDisabled: true,
openDelay: "800",//时间8秒
}
},
methods: {
spanMouseenter(ev) {
this.tooltipDisabled =
ev.target.clientWidth < ev.target.scrollWidth ? false : true;
}
}
}
//样式部分
.text-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}