el-tree超出之后显示问题

实现效果如下图所示：

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>