[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 组件鼠标双击事件

相关推荐
m***11902 分钟前
【前端】Node.js使用教程
前端·node.js·vim
QianhangQianping12 分钟前
前端技术迭代深析:从 CSS 布局到状态管理的进化之路
前端·css
阿道夫小狮子13 分钟前
Android 反射
android·前端·javascript
Dwzun14 分钟前
基于SpringBoot的共享单车调度系统【附源码+文档+部署视频+讲解)
java·数据库·vue.js·spring boot·后端·毕业设计·maven
特级业务专家16 分钟前
写埋点、扒 SDK、改框架:JS 函数复写 10 连招实战手册
前端
感谢地心引力16 分钟前
【HTML Living Standard 01】HTML基础概述
前端·html
Coder-coco18 分钟前
选题管理|基于springboot + vue毕业设计选题管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计
૮・ﻌ・18 分钟前
Vue2(三):自定义指令、插槽、路由
前端·javascript·vue.js
遇到困难睡大觉哈哈23 分钟前
Harmony os 卡片传递消息给应用(message 事件)详细介绍
java·服务器·javascript·harmonyos·鸿蒙