Vue ElementUI el-tree 组件鼠标双击事件_elementplus 树形控件双击-CSDN博客

本文介绍了如何在ElementUI的tree组件中添加双击事件处理，由于官方不直接支持，作者通过监听node-click事件并结合业务需求实现了自定义的双击事件功能。

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

目前 element-ui 的 tree 控件不支持双击事件，但是这个时候有个需求,需要双击事件.
没办法,只能自己写一个咯,记录下自己写的方法

简单引用,添加@node-click事件

	<el-tree
            ref="tree"
            node-key="id"
            :data="treeData"
            :expand-on-click-node="false"
            @node-click="handleNodeClick">
    </el-tree>

在handleNodeClick事件中处理双击事件

data() {
    return {
    	//定义点击次数,默认0次
        treeClickCount: 0,
    }
},
methods: {
	//节点点击事件
	handleNodeClick(data, node) {
		//记录点击次数
		this.treeClickCount++;
		//单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
		if (this.treeClickCount >= 2) {
			return;
		}
		//计时器,计算300毫秒为单位,可自行修改
		this.timer = window.setTimeout(() => {
			if (this.treeClickCount == 1) {
				//把次数归零
				this.treeClickCount = 0;
				//单击事件处理
				this.console('单击事件,可在此处理对应逻辑')
				
			} else if (this.treeClickCount > 1) {
				//把次数归零
				this.treeClickCount = 0;
				//双击事件
				this.console('双击事件,可在此处理对应逻辑')
			}
		}, 300);
	
	}
}

结束