<span :class="setcolor(node) ? 'custom-tree-node' : 'custom-tree-node1'" slot-scope="{ node }" class="showname">
//气泡框定义,属性,disabled决定气泡框是否可用
<el-tooltip :content="node.label" :disabled="isShowTooltip" :open-delay="300" placement="top" effect="dark">
//设置移入事件mouseover
<div class="showname1" @mouseover="mouseOver($event)">
<span style="margin-right:5px" :class="node.data.icon"> </span>
<span>{{ node.label }}</span>
</div>
</el-tooltip>
</span>
如果长度小于等于变量就是true显示气泡框。
mouseOver(event) {
this.isShowTooltip = event.currentTarget.scrollWidth <= event.currentTarget.clientWidth;
}
css 树显示超出时省略号
.showname {
width: 100%;
overflow: hidden !important;
}
.showname1 {
width: 100%;
white-space: nowrap !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
display: block !important;
}