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

最新推荐文章于 2025-02-13 16:59:02 发布

bamboolm

最新推荐文章于 2025-02-13 16:59:02 发布

阅读量4.4k

点赞数 2

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/bamboolm/article/details/126417043

版权

本文档介绍了如何利用Element UI的<el-tree>组件添加鼠标悬停提示文字事件。通过插槽自定义节点内容，结合CSS样式实现节点文字的省略号效果，并展示了如何在节点被点击时进行业务处理。示例代码中包含关键属性和方法的设置，如node-key、filter-node-method等，帮助开发者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天领导让给<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部分是重点