Skip to content

Commit 30737b0

Browse files
ba1q1ba1q1
committed
feat(update): 支持调用更新直接插入新节点
1 parent 5753a31 commit 30737b0

File tree

5 files changed

+881
-897
lines changed

5 files changed

+881
-897
lines changed

‎src/components/mixins/common-methods.js‎

Lines changed: 133 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,146 @@
11
import { getNodeKey } from "../model/util";
22

33
export default {
4-
methods: {
5-
init(parent) {
6-
if (parent.isTree) {
7-
this.tree = parent;
8-
} else {
9-
this.tree = parent.tree;
10-
}
11-
12-
const tree = this.tree;
13-
if (!tree) {
14-
console.warn("Can not find node's tree.");
15-
}
16-
17-
const props = tree.props || {};
18-
const childrenKey = props["children"] || "children";
19-
20-
this.$watch(`node.data.${childrenKey}`, () => {
21-
this.node.updateChildren();
22-
});
23-
24-
if (this.node.expanded) {
25-
this.expanded = true;
26-
this.childNodeRendered = true;
27-
}
28-
29-
if (this.tree.accordion && !this.tree.height) {
30-
this.$on("tree-node-expand", (node) => {
31-
if (this.node !== node) {
32-
this.node.collapse();
33-
}
34-
});
35-
}
36-
},
37-
38-
getNodeKey(node) {
39-
return getNodeKey(this.tree.nodeKey, node.data);
40-
},
41-
handleDragStart(event) {
42-
if (!this.tree.draggable) return;
43-
this.tree.$emit("tree-node-drag-start", event, this);
44-
},
45-
46-
handleDragOver(event) {
47-
if (!this.tree.draggable) return;
48-
this.tree.$emit("tree-node-drag-over", event, this);
49-
event.preventDefault();
4+
methods: {
5+
init(parent) {
6+
if (parent.isTree) {
7+
this.tree = parent;
8+
} else {
9+
this.tree = parent.tree;
10+
}
11+
12+
const tree = this.tree;
13+
if (!tree) {
14+
console.warn("Can not find node's tree.");
15+
}
16+
17+
const props = tree.props || {};
18+
const childrenKey = props["children"] || "children";
19+
20+
this.$watch(
21+
`node.data.${childrenKey}`,
22+
() => {
23+
this.node.updateChildren();
5024
},
25+
{ deep: true }
26+
);
27+
28+
if (this.node.expanded) {
29+
this.expanded = true;
30+
this.childNodeRendered = true;
31+
}
32+
33+
if (this.tree.accordion && !this.tree.height) {
34+
this.$on("tree-node-expand", node => {
35+
if (this.node !== node) {
36+
this.node.collapse();
37+
}
38+
});
39+
}
40+
},
41+
getNodeKey(node) {
42+
return getNodeKey(this.tree.nodeKey, node.data);
43+
},
44+
handleDragStart(event) {
45+
if (!this.tree.draggable) return;
46+
this.tree.$emit("tree-node-drag-start", event, this);
47+
},
5148

52-
handleDragEnd(event) {
53-
if (!this.tree.draggable) return;
54-
this.tree.$emit("tree-node-drag-end", event, this);
55-
},
49+
handleDragOver(event) {
50+
if (!this.tree.draggable) return;
51+
this.tree.$emit("tree-node-drag-over", event, this);
52+
event.preventDefault();
53+
},
5654

57-
handleDrop(event) {
58-
event.preventDefault();
59-
},
55+
handleDragEnd(event) {
56+
if (!this.tree.draggable) return;
57+
this.tree.$emit("tree-node-drag-end", event, this);
58+
},
6059

61-
handleSelectChange(checked, indeterminate) {
62-
const node = this.node;
63-
64-
if (
65-
this.oldChecked !== checked &&
66-
this.oldIndeterminate !== indeterminate
67-
) {
68-
this.tree.$emit(
69-
"check-change",
70-
node.data,
71-
checked,
72-
indeterminate,
73-
);
74-
}
75-
this.oldChecked = checked;
76-
this.indeterminate = indeterminate;
77-
},
60+
handleDrop(event) {
61+
event.preventDefault();
62+
},
7863

79-
handleClick() {
80-
const node = this.node;
81-
const store = this.tree.store;
82-
83-
store.setCurrentNode(node);
84-
this.tree.$emit(
85-
"current-change",
86-
store.currentNode ? store.currentNode.data : null,
87-
store.currentNode,
88-
);
89-
this.tree.currentNode = this;
90-
if (this.tree.expandOnClickNode) {
91-
this.handleExpandIconClick();
92-
}
93-
if (this.tree.checkOnClickNode && !node.disabled) {
94-
this.handleCheckChange(null, {
95-
target: { checked: !node.checked },
96-
});
97-
}
98-
99-
this.tree.$emit("node-click", node.data, node, this);
100-
},
64+
handleSelectChange(checked, indeterminate) {
65+
const node = this.node;
66+
67+
if (
68+
this.oldChecked !== checked &&
69+
this.oldIndeterminate !== indeterminate
70+
) {
71+
this.tree.$emit("check-change", node.data, checked, indeterminate);
72+
}
73+
this.oldChecked = checked;
74+
this.indeterminate = indeterminate;
75+
},
10176

102-
handleContextMenu(event) {
103-
const node = this.node;
104-
105-
if (
106-
this.tree._events["node-contextmenu"] &&
107-
this.tree._events["node-contextmenu"].length > 0
108-
) {
109-
event.stopPropagation();
110-
event.preventDefault();
111-
}
112-
this.tree.$emit("node-contextmenu", event, node.data, node, this);
113-
},
77+
handleClick() {
78+
const node = this.node;
79+
const store = this.tree.store;
80+
81+
store.setCurrentNode(node);
82+
this.tree.$emit(
83+
"current-change",
84+
store.currentNode ? store.currentNode.data : null,
85+
store.currentNode
86+
);
87+
this.tree.currentNode = this;
88+
if (this.tree.expandOnClickNode) {
89+
this.handleExpandIconClick();
90+
}
91+
if (this.tree.checkOnClickNode && !node.disabled) {
92+
this.handleCheckChange(null, {
93+
target: { checked: !node.checked }
94+
});
95+
}
96+
97+
this.tree.$emit("node-click", node.data, node, this);
98+
},
11499

115-
handleExpandIconClick() {
116-
const node = this.node;
117-
118-
if (node.isLeaf) return;
119-
if (this.expanded) {
120-
this.tree.$emit("node-collapse", node.data, node, this);
121-
node.collapse();
122-
} else {
123-
node.expand();
124-
this.$emit("node-expand", node.data, node, this);
125-
}
126-
},
100+
handleContextMenu(event) {
101+
const node = this.node;
102+
103+
if (
104+
this.tree._events["node-contextmenu"] &&
105+
this.tree._events["node-contextmenu"].length > 0
106+
) {
107+
event.stopPropagation();
108+
event.preventDefault();
109+
}
110+
this.tree.$emit("node-contextmenu", event, node.data, node, this);
111+
},
127112

128-
handleCheckChange(_, ev) {
129-
const node = this.node;
130-
131-
node.setChecked(ev.target.checked, !this.tree.checkStrictly);
132-
this.$nextTick(() => {
133-
const store = this.tree.store;
134-
this.tree.$emit("check", node.data, {
135-
checkedNodes: store.getCheckedNodes(),
136-
checkedKeys: store.getCheckedKeys(),
137-
halfCheckedNodes: store.getHalfCheckedNodes(),
138-
halfCheckedKeys: store.getHalfCheckedKeys(),
139-
});
140-
});
141-
},
113+
handleExpandIconClick() {
114+
const node = this.node;
115+
116+
if (node.isLeaf) return;
117+
if (this.expanded) {
118+
this.tree.$emit("node-collapse", node.data, node, this);
119+
node.collapse();
120+
} else {
121+
node.expand();
122+
this.$emit("node-expand", node.data, node, this);
123+
}
124+
},
142125

143-
handleChildNodeExpand(nodeData, node, instance) {
144-
this.broadcast(this.tree.treeNodeName, "tree-node-expand", node);
145-
this.tree.$emit("node-expand", nodeData, node, instance);
146-
},
126+
handleCheckChange(_, ev) {
127+
const node = this.node;
128+
129+
node.setChecked(ev.target.checked, !this.tree.checkStrictly);
130+
this.$nextTick(() => {
131+
const store = this.tree.store;
132+
this.tree.$emit("check", node.data, {
133+
checkedNodes: store.getCheckedNodes(),
134+
checkedKeys: store.getCheckedKeys(),
135+
halfCheckedNodes: store.getHalfCheckedNodes(),
136+
halfCheckedKeys: store.getHalfCheckedKeys()
137+
});
138+
});
147139
},
148-
};
140+
141+
handleChildNodeExpand(nodeData, node, instance) {
142+
this.broadcast(this.tree.treeNodeName, "tree-node-expand", node);
143+
this.tree.$emit("node-expand", nodeData, node, instance);
144+
}
145+
}
146+
};

0 commit comments

Comments
 (0)