Skip to content

Commit 5c9ec17

Browse files
committed
feat: update children
1 parent 157f4d5 commit 5c9ec17

File tree

4 files changed

+276
-62
lines changed

4 files changed

+276
-62
lines changed
+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<button @click="handleSetChildren">Set node-1 children</button>
3+
<button @click="handleClearChildren">Clear node-1 children</button>
4+
<div :style="{ height: '300px' }">
5+
<VTree ref="tree" />
6+
</div>
7+
</template>
8+
9+
<script setup lang="ts">
10+
import { computed, onMounted, ref } from 'vue'
11+
import VTree from '@wsfe/vue-tree'
12+
13+
const tree = ref()
14+
15+
const children = Array.from({ length: 100000 }).map((_, i) => {
16+
return {
17+
title: `node-1-${i + 1}`,
18+
id: `node-1-${i + 1}`,
19+
}
20+
})
21+
22+
const data = [
23+
{
24+
title: 'node-1',
25+
id: 'node-1',
26+
children,
27+
},
28+
{
29+
title: 'node-2',
30+
id: 'node-2',
31+
children: [
32+
{
33+
title: 'node-2-1',
34+
id: 'node-2-1',
35+
},
36+
],
37+
},
38+
]
39+
40+
onMounted(() => {
41+
tree.value.setData(data)
42+
})
43+
44+
const handleSetChildren = () => {
45+
tree.value.updateNode('node-1', { children })
46+
}
47+
const handleClearChildren = () => {
48+
tree.value.updateNode('node-1', { children: [] })
49+
}
50+
</script>
51+
52+
<style scoped>
53+
button {
54+
border: 1px solid lightgray;
55+
border-radius: 8px;
56+
padding-left: 10px;
57+
padding-right: 10px;
58+
margin-right: 20px;
59+
}
60+
</style>
+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<button @click="handleUpdateSingleNode">Update node-1</button>
3+
<button @click="handleUpdateMultipleNode">Update node-1 & node-2</button>
4+
<VTree ref="tree" />
5+
</template>
6+
7+
<script setup lang="ts">
8+
import { computed, onMounted, ref } from 'vue'
9+
import VTree from '@wsfe/vue-tree'
10+
11+
const tree = ref()
12+
13+
const data = [
14+
{
15+
title: 'node-1',
16+
id: 'node-1',
17+
children: [
18+
{
19+
title: 'node-1-1',
20+
id: 'node-1-1',
21+
},
22+
{
23+
title: 'node-1-2',
24+
id: 'node-1-2',
25+
},
26+
],
27+
},
28+
{
29+
title: 'node-2',
30+
id: 'node-2',
31+
children: [
32+
{
33+
title: 'node-2-1',
34+
id: 'node-2-1',
35+
},
36+
],
37+
},
38+
]
39+
40+
onMounted(() => {
41+
tree.value.setData(data)
42+
})
43+
44+
const count = ref(0)
45+
46+
const handleUpdateSingleNode = () => {
47+
count.value++
48+
tree.value.updateNode('node-1', { title: `node-1 - ${count.value}` })
49+
}
50+
const handleUpdateMultipleNode = () => {
51+
count.value++
52+
tree.value.updateNodes([
53+
{
54+
id: 'node-1',
55+
title: `node-1 - ${count.value}`,
56+
},
57+
{
58+
id: 'node-2',
59+
title: `node-2 - ${count.value}`,
60+
},
61+
])
62+
}
63+
</script>
64+
65+
<style scoped>
66+
button {
67+
border: 1px solid lightgray;
68+
border-radius: 8px;
69+
padding-left: 10px;
70+
padding-right: 10px;
71+
margin-right: 20px;
72+
}
73+
</style>

site/examples/node-manipulation.md

+14
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,17 @@
2222
- 调用树组件的 `remove` 方法,可移除节点
2323

2424
<CodeDemo component="NodeCreationAndRemoval" />
25+
26+
## 更新节点名称 {#update-node-title}
27+
28+
调用树组件的 `updateNode` 方法可更新节点部分字段
29+
30+
调用 `updateNodes` 可批量更新
31+
32+
<CodeDemo component="UpdateNodeTitle" />
33+
34+
## 重新加载子节点 {#reload-children}
35+
36+
调用 `updateNode` 传入新的 `children` 列表可以重新加载子节点
37+
38+
<CodeDemo component="ReloadChildren" />

0 commit comments

Comments
 (0)