过长的文字隐藏,显示省略号,鼠标指上去气泡框显示全名

551 阅读1分钟
<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;
}