1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
<div
class="app-element-tree-node el-tree-node"
@click.stop="handleClick"
@contextmenu="$event => this.handleContextMenu($event)"
v-show="node.visible"
:class="{
'is-expanded': expanded,
'is-current': node.isCurrent,
'is-hidden': !node.visible,
'is-focusable': !node.disabled,
'is-checked': !node.disabled && node.checked,
[`tree-node-id-${node.id}`]: true
}"
role="treeitem"
tabindex="-1"
:aria-expanded="expanded"
:aria-disabled="node.disabled"
:aria-checked="node.checked"
:draggable="tree.draggable"
@dragstart.stop="handleDragStart"
@dragover.stop="handleDragOver"
@dragend.stop="handleDragEnd"
@drop.stop="handleDrop"
ref="node"
>
<div class="el-tree-node__content" :style="{ 'margin-left': (node.level - 1) * tree.indent + 'px' }">
<span
@click.stop="handleExpandIconClick"
:class="[
{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
'el-tree-node__expand-icon',
tree.iconClass ? tree.iconClass : 'el-icon-caret-right',
]"
>
</span>
<el-checkbox
v-if="showCheckbox && node.data.enablecheck"
v-model="node.checked"
:indeterminate="node.indeterminate"
:disabled="!!node.disabled"
@click.native.stop
@change="handleCheckChange"
>
</el-checkbox>
<span v-if="node.loading" class="el-tree-node__loading-icon el-icon-loading"> </span>
<node-content
v-if="!isEditable || !node.data.allowEditText"
:node="node"
@dblclick.native="handleDBlclick($event, node)"
></node-content>
<el-input
class="app-tree-node-input"
v-focus
v-if="isEditable && node.data.allowEditText"
size="small"
v-model="inputvalue"
@blur="handleValueChange($event, node)"
></el-input>
</div>
<el-collapse-transition>
<div
class="el-tree-node__children"
v-if="!renderAfterExpand || childNodeRendered"
v-show="expanded"
role="group"
:aria-expanded="expanded"
>
<app-element-tree-node
:render-content="renderContent"
v-for="child in node.childNodes"
:render-after-expand="renderAfterExpand"
:show-checkbox="showCheckbox"
:key="getNodeKey(child)"
:node="child"
@node-expand="handleChildNodeExpand"
>
</app-element-tree-node>
</div>
</el-collapse-transition>
</div>
</template>
<script>
import ElTreeNode from 'element-ui/packages/tree/src/tree-node.vue';
export default {
name: 'AppElementTreeNode',
componentName: 'AppElementTreeNode',
mixins: [ElTreeNode],
directives: {
focus: {
inserted: function (el) {
el.querySelector('input').focus();
},
},
},
props: {},
data() {
return {
isEditable: false,
};
},
computed: {
inputvalue: {
set(value) {
this.tree.$emit('edit-value-change', value, this.node, this);
},
get() {
return this.node.label;
},
},
},
methods: {
handleDBlclick(event, node) {
event.stopPropagation();
this.isEditable = true;
},
handleValueChange(event, node) {
this.tree.$emit('close-edit', this.node, this);
event.stopPropagation();
this.isEditable = false;
},
},
};
</script>