el-tree组件在内容超出长度时出现...并鼠标移入出现提示框

1 html  部分 树形组件的提示框需要自定义，如下

    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
                   ref="tree" default-expand-all highlight-current @node-click="handleNodeClick"/>
          <el-tree :data="deptOptions" node-key="id" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
                   ref="tree" default-expand-all highlight-current @node-click="handleNodeClick">
      <el-tooltip  :disabled ="showTitle" effect="dark" :content="tooltipTitle" placement="top"  slot-scope="{ node, data }" >
        <span class="span-ellipsis"  @mouseover="onShowNameTips">{{node.label}}</span>
      </el-tooltip>
    </el-tree>

2 方法部分

 onShowNameTips(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;
      }
    },

3 css 部分

<style lang="scss">
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 20px;
}

</style>