[element-ui] el-tree 组件鼠标双击事件

el-tree组件本身是不支持双击事件的

html 复制代码
  <el-tree
    class="tree"
    :data="nodeData"
    :props="defaultProps"    
    @node-click="handleNodeClick"
  ></el-tree>

注意一下,nodeData中每一项都需要一个唯一值,用来区分两次的操作,我这里用的是id

javascript 复制代码
handleNodeClick(data,node,prop) {
	console.log(data,node,prop);
	this.nodeCount++;
	if( this.preNodeId && this.nodeCount >= 2){
	  this.curNodeId = data.id ;
	  this.nodeCount = 0;
	  if(this.curNodeId == this.preNodeId){//第一次点击的节点和第二次点击的节点id相同
	    console.log('双击,执行代码写在这里');
	    this.curNodeId = null;
	    this.preNodeId = null   ;   
	    return;
	  }
	}
	
	this.preNodeId = data.id;
	this.nodeTimer = setTimeout(() => { //300ms内没有第二次点击就把第一次点击的清空
	  this.preNodeId  = null;
	  this.nodeCount = 0;
	},300)   
	
},

参考:

Vue ElementUI el-tree 组件鼠标双击事件

相关推荐
|晴 天|6 小时前
Vue 3 + TypeScript + Element Plus 博客系统开发总结与思考
前端·vue.js·typescript
猫3287 小时前
v-cloak
前端·javascript·vue.js
AC赳赳老秦7 小时前
OpenClaw二次开发实战:编写专属办公自动化技能,适配个性化需求
linux·javascript·人工智能·python·django·测试用例·openclaw
旷世奇才李先生7 小时前
Vue 3\+Vite\+Pinia实战:企业级前端项目架构设计
前端·javascript·vue.js
Ulyanov8 小时前
《PySide6 GUI开发指南:QML核心与实践》 第二篇:QML语法精要——构建声明式UI的基础
java·开发语言·javascript·python·ui·gui·雷达电子对抗系统仿真
聚美智数8 小时前
企业实际控制人查询-公司实控人查询
android·java·javascript
SoaringHeart9 小时前
Flutter进阶:用OverlayEntry 实现所有弹窗效果
前端·flutter
IT_陈寒10 小时前
Vite静态资源加载把我坑惨了
前端·人工智能·后端
herinspace10 小时前
管家婆实用贴-如何分离和附加数据库
开发语言·前端·javascript·数据库·语音识别
小码哥_常11 小时前
从MVC到MVI:一文吃透架构模式进化史
前端