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"/>
</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
        }, 500);
        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