Element-ui Tree非侵入式增加双击展开功能（单击双击事件不冲突）

1.第一步添加组件

//自定义tree添加双击事件
import {Tree} from 'element-ui'

Tree.name = 'extend-base-el-tree'; // 改名
Vue.use(Tree); // 注册

2.新建el-tree组件，里面的内容为,记得npm install lodash.debounce,下面用到

<template>
  <extend-base-el-tree v-bind="$attrs" @node-click="hdlClick">
    <!--这里我把node和data两个变量给暴漏出去，用于自定义节点的时候用-->
    <span slot-scope="{ node, data }">
        <slot :node="node" :data="data"></slot>
    </span>
  </extend-base-el-tree>
</template>

<script>
  import debounce from 'lodash.debounce'

  export default {
    inheritAttrs: false,
    data() {
      return {
        clickCount: 0
      }
    },
    methods: {
      hdlClick() {
        const args = arguments;

        // 发送双击事件
        this.clickCount++;
        const fnEmitDblClick = debounce(() => {
          //之前发现单击双击事件冲突，然后我在这里修改了一下，只不过单击会有500毫秒的延迟，因为浏览器得判断是双击还是单击事件
          if (this.clickCount === 1) {
            // 发送单击事件
            this.$emit('nod-click', ...args);
          }
          if (this.clickCount > 1) {
            this.$emit('node-dblclick', ...args)
          }
          this.clickCount = 0
        }, 300);
        fnEmitDblClick()
      }
    }
  }
</script>

 

3.第三步使用

<el-tree node-key="IndexNum"
                 v-loading="loading2"
                 :expand-on-click-node="false"
                 ref="tree"
                 default-expand-all
                 :highlight-current="true"
                 @node-dblclick="hdlDblclick"
                 @nod-click="handleNodeClick"
                 :data="deptDatas"
                 :props="defaultProps">

        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
        </span>

        </el-tree>

 

注意：如果想用$refs属性获取原来的tree组件这样写就可以了

this.$refs['tree'].$children[0]

然后就可以调用tree组件下面的类似updateKeyChildren这样的方法了。

hdlDblclick方法的第一个参数是data，第二个是node