element-ui中tree组件双击事件的实现

---

前言

近期，笔者项目中遇到一个需求：实现左侧设备树（基于elment-ui tree组件）双击事件。查看element-ui官网后发现，element-ui中tree组件没有提供双击事件，故只能自己动手实现双击事件。

---

elwment-ui tree组件中提供了单击事件，故我基于单击事件实现双击事件。

代码实现

代码如下（示例）：

......
<el-tree 
  :data="data" 
  :props="defaultProps"
  @node-click="handleNodeClick" 
>
......
data(){
.....
  treeClickCount: 0
.....
}
.....
method: {
......
  // 点击树节点
  handleNodeClick(data) {
    // data为被点击节点数据
    // 记录点树节点击次数
    this.treeClickCount++
    if(this.treeClickCount >2) return
    setTimeout(() => {
      if(this.treeClickCount == 1){
      // 进行单击事件处理
        console.log('单击事件', data)
      } else if(this.treeClickCount == 2) {
      // 进行双击事件处理
        console.log('双击事件', data)
      }
      this.treeClickCount = 0
    }, 500)
  },
  ......
}
......

---

总结

以上简单的处理就实现了elment-ui中tree组件双击事件，欢迎大家评论交流！