实现效果如下图所示：
image.png
先给el-tree设置一个class值，class="show-tree" 然后是设置字体超出显示
textSlice(5) 可以参见我之前《vue Element表格样式处理》中已经写过，是一样的。
<el-tree
ref="treeParent"
:load="loadNode"
lazy
:data="data"
:props="defaultProps"
:default-expand-all="true"
:highlight-current="true"
class="show-tree"
>
<template slot-scope="{node}">
<el-tooltip effect="light" :content="node.label">
<span> {{ node.label | textSlice(5)}}</span>
</el-tooltip>
</template>
</el-tree>
然后用深度选择器更改样式
<style scoped>
>>> .show-tree .el-tree-node__content{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
}
</style>
