ElementUI Tree组件单击双击操作

最新推荐文章于 2024-09-11 11:00:10 发布

小于___

最新推荐文章于 2024-09-11 11:00:10 发布

阅读量1.7k

点赞数 1

分类专栏： Vue 文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/a_Novice_Programmer/article/details/110951657

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何为ElementUI的Tree组件实现单击与双击事件共存的问题，并通过防抖技术解决双击时触发两次单击事件的问题。

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

场景

业务需要，要求ElementUI的Tree组件同时拥有单击和双击两种事件。官方组件API只提供了单击事件，双击事件则需要自己扩展。（扩展不是本篇的重点）

问题

扩展好双击事件，代码如下：

<template>
  <div>
    <el-tree :data="data" node-key="id" :props="defaultProps">
      <span slot-scope="{ node, data }">
        <span @nodedbclick="nodeDbClick" @click="nodeClik">{{
          data.label
        }}</span></span
      >
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    };
  },
  methods: {
    nodeClik() {
      console.log("触发单击");
    },
    nodeDbClick() {
      console.log("触发双击");
    }
  }
};
</script>

在触发双击事件之前，总会触发两次单击事件，显然会影响具体的业务操作！

解决

使用防抖解决此问题！！！！

<script>
let debounceTimer;
export default {
  data() {
    return {
      data: [],
      timer: null,
    };
  },
  methods: {
    nodeClik() {
      debounceTimer = this.timer;
      if (debounceTimer) {
        window.clearTimeout(debounceTimer);
        this.timer = null;
      }
      this.timer = window.setTimeout(() => {
        console.log("触发单击");
      }, 500);
    },
    nodeDbClick() {
      debounceTimer = this.timer;
      if (debounceTimer) {
        window.clearTimeout(debounceTimer);
        this.timer = null;
      }
      console.log("触发双击");
    }
  }
};
</script>