feat: update children

Author: ChuChencheng

site/.vitepress/code/ReloadChildren.vue

@@ -0,0 +1,60 @@
+<template>
+  <button @click="handleSetChildren">Set node-1 children</button>
+  <button @click="handleClearChildren">Clear node-1 children</button>
+  <div :style="{ height: '300px' }">
+    <VTree ref="tree" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import VTree from '@wsfe/vue-tree'
+
+const tree = ref()
+
+const children = Array.from({ length: 100000 }).map((_, i) => {
+  return {
+    title: `node-1-${i + 1}`,
+    id: `node-1-${i + 1}`,
+  }
+})
+
+const data = [
+  {
+    title: 'node-1',
+    id: 'node-1',
+    children,
+  },
+  {
+    title: 'node-2',
+    id: 'node-2',
+    children: [
+      {
+        title: 'node-2-1',
+        id: 'node-2-1',
+      },
+    ],
+  },
+]
+
+onMounted(() => {
+  tree.value.setData(data)
+})
+
+const handleSetChildren = () => {
+  tree.value.updateNode('node-1', { children })
+}
+const handleClearChildren = () => {
+  tree.value.updateNode('node-1', { children: [] })
+}
+</script>
+
+<style scoped>
+button {
+  border: 1px solid lightgray;
+  border-radius: 8px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-right: 20px;
+}
+</style>

site/.vitepress/code/UpdateNodeTitle.vue

@@ -0,0 +1,73 @@
+<template>
+  <button @click="handleUpdateSingleNode">Update node-1</button>
+  <button @click="handleUpdateMultipleNode">Update node-1 & node-2</button>
+  <VTree ref="tree" />
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import VTree from '@wsfe/vue-tree'
+
+const tree = ref()
+
+const data = [
+  {
+    title: 'node-1',
+    id: 'node-1',
+    children: [
+      {
+        title: 'node-1-1',
+        id: 'node-1-1',
+      },
+      {
+        title: 'node-1-2',
+        id: 'node-1-2',
+      },
+    ],
+  },
+  {
+    title: 'node-2',
+    id: 'node-2',
+    children: [
+      {
+        title: 'node-2-1',
+        id: 'node-2-1',
+      },
+    ],
+  },
+]
+
+onMounted(() => {
+  tree.value.setData(data)
+})
+
+const count = ref(0)
+
+const handleUpdateSingleNode = () => {
+  count.value++
+  tree.value.updateNode('node-1', { title: `node-1 - ${count.value}` })
+}
+const handleUpdateMultipleNode = () => {
+  count.value++
+  tree.value.updateNodes([
+    {
+      id: 'node-1',
+      title: `node-1 - ${count.value}`,
+    },
+    {
+      id: 'node-2',
+      title: `node-2 - ${count.value}`,
+    },
+  ])
+}
+</script>
+
+<style scoped>
+button {
+  border: 1px solid lightgray;
+  border-radius: 8px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-right: 20px;
+}
+</style>

site/examples/node-manipulation.md

@@ -22,3 +22,17 @@
 - 调用树组件的 `remove` 方法，可移除节点
 
 <CodeDemo component="NodeCreationAndRemoval" />
+
+## 更新节点名称 {#update-node-title}
+
+调用树组件的 `updateNode` 方法可更新节点部分字段
+
+调用 `updateNodes` 可批量更新
+
+<CodeDemo component="UpdateNodeTitle" />
+
+## 重新加载子节点 {#reload-children}
+
+调用 `updateNode` 传入新的 `children` 列表可以重新加载子节点
+
+<CodeDemo component="ReloadChildren" />