Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a3e662c

Browse files
feat: update children
1 parent 5241c3b commit a3e662c

File tree

4 files changed

+276
-62
lines changed

4 files changed

+276
-62
lines changed

‎site/.vitepress/code/ReloadChildren.vue

Lines changed: 60 additions & 0 deletions
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>
Lines changed: 73 additions & 0 deletions
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

Lines changed: 14 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /