File tree 4 files changed +276
-62
lines changed
4 files changed +276
-62
lines changed Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change 22
22
- 调用树组件的 ` remove ` 方法,可移除节点
23
23
24
24
<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 " />
You can’t perform that action at this time.
0 commit comments