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