el-tree文本太长,文字溢出处理,鼠标移上去显示全部内容:
解决办法:
<el-tree
ref="tree"
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
node-key="id"
default-expand-all
:highlight-current="true"
@node-click="handleNodeClick"
class="custom-tree"
>
<el-tooltip
:disabled="showTitle"
effect="dark"
:content="tooltipTitle"
placement="top"
slot-scope="{node,data}"
>
<span class="span-ellipsis"
@mouseover="onShowNameTipsMouseenter">
{{node.label}}
</span>
</el-tooltip>
</el-tree>
鼠标移上去方法,写在methods:{}里面
onShowNameTipsMouseenter(e){
var target = e.target;
let textLength = target.clientWidth;
let containerLength = target.scrollWidth;
if (textLength < containerLength) {
this.tooltipTitle = e.target.innerText;
this.showTitle = false;
} else {
this.showTitle = true;
}
}
定义属性:
data() {
return {
tooltipTitle: "",
showTitle: true,
currentNodeId: "",
}
}
最后样式代码为:
::v-deep {
.el-tooltip {
color: black;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
}
}
效果: