vue ＜el-tree＞ 加鼠标悬停提示文字

今天领导让给<el-tree> 加鼠标悬停提示文字事件，查看了element官网，有个自定义，通过插槽自定义树节点的内容，参数为 { node, data }

上代码：

<el-tree
         @node-click="handleNodeClick"
         class="filter-tree"
         :data="data"
         node-key="label"
         :props="defaultProps"
         default-expand-all
         :filter-node-method="filterNode"
         ref="tree"
         :current-node-key = "currentNodeKey"
         highlight-current
>
    <span slot-scope="{ node, data }" class="custom-tree-node showname"                 :title="node.label" v-text="node.label">
    </span>
</el-tree>

.showname {
    width: 60px;  // 定宽
    overflow: hidden !important;  // 溢出部分隐藏
    white-space: nowrap !important;  //禁止自动换行
    text-overflow: ellipsis !important;  // 使溢出部分以省略号显示
    display: block !important;
}

data () {
    return {
        data: [],
        defaultProps: {
            children: children,
            label: label
        },
   }
}，

methods: {
    handleNodeClick(e) {
            const a = this.$refs.tree.getNode(e.label);  
            if (a.childNodes.length === 0) {  // 判断最后一个子节点
                // 做自己业务
            }
    },
}

其他样式可以根据项目自行调节。slot-scope部分是重点