From 346c6e92f4534a4c674c61e156cfcc7aec735b9c Mon Sep 17 00:00:00 2001
From: jahnli <jahnli@163.com>
Date: Thu, 2 Oct 2025 09:42:03 +0800
Subject: [PATCH] feat(tree-select): add get-children demo

---
 .../demos/enUS/index.demo-entry.md            |   1 +
 .../demos/enUS/node-display-mode.demo.vue     | 171 ++++++++++++++++++
 .../demos/zhCN/index.demo-entry.md            |   1 +
 .../demos/zhCN/node-display-mode.demo.vue     | 171 ++++++++++++++++++
 src/tree/demos/enUS/index.demo-entry.md       |   1 +
 .../demos/enUS/node-display-mode.demo.vue     |  62 +++++++
 src/tree/demos/zhCN/index.demo-entry.md       |   1 +
 .../demos/zhCN/node-display-mode.demo.vue     |  62 +++++++
 8 files changed, 470 insertions(+)
 create mode 100644 src/tree-select/demos/enUS/node-display-mode.demo.vue
 create mode 100644 src/tree-select/demos/zhCN/node-display-mode.demo.vue
 create mode 100644 src/tree/demos/enUS/node-display-mode.demo.vue
 create mode 100644 src/tree/demos/zhCN/node-display-mode.demo.vue

diff --git a/src/tree-select/demos/enUS/index.demo-entry.md b/src/tree-select/demos/enUS/index.demo-entry.md
index c40b0df2d9b..2efeea2838a 100644
--- a/src/tree-select/demos/enUS/index.demo-entry.md
+++ b/src/tree-select/demos/enUS/index.demo-entry.md
@@ -15,6 +15,7 @@ action.vue
 async.vue
 status.vue
 file-picker.vue
+node-display-mode.vue
 debug.vue
 ```
 
diff --git a/src/tree-select/demos/enUS/node-display-mode.demo.vue b/src/tree-select/demos/enUS/node-display-mode.demo.vue
new file mode 100644
index 00000000000..b9ff435bba6
--- /dev/null
+++ b/src/tree-select/demos/enUS/node-display-mode.demo.vue
@@ -0,0 +1,171 @@
+<markdown>
+  # Node display mode
+
+  You can use `get-children` to implement different ways of displaying nodes.
+  </markdown>
+
+<script lang="ts">
+import type { TreeSelectOption } from 'naive-ui'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      active: ref(false),
+      handleUpdateValue(
+        value: string | number | Array<string | number> | null,
+        option: TreeSelectOption | null | Array<TreeSelectOption | null>
+      ) {
+        console.log(value, option)
+      },
+      options: [
+        {
+          label: 'Rubber Soul',
+          key: 'Rubber Soul',
+          children: [
+            {
+              label:
+                'Everybody\'s Got Something to Hide Except Me and My Monkey',
+              key: 'Everybody\'s Got Something to Hide Except Me and My Monkey',
+              children: []
+            },
+            {
+              label: 'Drive My Car',
+              key: 'Drive My Car',
+              disabled: true,
+              children: []
+            },
+            {
+              label: 'Norwegian Wood',
+              key: 'Norwegian Wood',
+              children: []
+            },
+            {
+              label: 'You Won\'t See',
+              key: 'You Won\'t See',
+              disabled: true,
+              children: []
+            },
+            {
+              label: 'Nowhere Man',
+              key: 'Nowhere Man',
+              children: []
+            },
+            {
+              label: 'Think For Yourself',
+              key: 'Think For Yourself',
+              children: []
+            },
+            {
+              label: 'The Word',
+              key: 'The Word',
+              children: []
+            },
+            {
+              label: 'Michelle',
+              key: 'Michelle',
+              disabled: true,
+              children: []
+            },
+            {
+              label: 'What goes on',
+              key: 'What goes on',
+              children: []
+            },
+            {
+              label: 'Girl',
+              key: 'Girl',
+              children: []
+            },
+            {
+              label: 'I\'m looking through you',
+              key: 'I\'m looking through you',
+              children: []
+            },
+            {
+              label: 'In My Life',
+              key: 'In My Life',
+              children: []
+            },
+            {
+              label: 'Wait',
+              key: 'Wait',
+              children: []
+            }
+          ]
+        },
+        {
+          label: 'Let It Be',
+          key: 'Let It Be Album',
+          children: [
+            {
+              label: 'Two Of Us',
+              key: 'Two Of Us'
+            },
+            {
+              label: 'Dig A Pony',
+              key: 'Dig A Pony'
+            },
+            {
+              label: 'Across The Universe',
+              key: 'Across The Universe'
+            },
+            {
+              label: 'I Me Mine',
+              key: 'I Me Mine'
+            },
+            {
+              label: 'Dig It',
+              key: 'Dig It'
+            },
+            {
+              label: 'Let It Be',
+              key: 'Let It Be'
+            },
+            {
+              label: 'Maggie Mae',
+              key: 'Maggie Mae'
+            },
+            {
+              label: 'I\'ve Got A Feeling',
+              key: 'I\'ve Got A Feeling'
+            },
+            {
+              label: 'One After 909',
+              key: 'One After 909'
+            },
+            {
+              label: 'The Long And Winding Road',
+              key: 'The Long And Winding Road'
+            },
+            {
+              label: 'For You Blue',
+              key: 'For You Blue'
+            },
+            {
+              label: 'Get Back',
+              key: 'Get Back'
+            }
+          ]
+        }
+      ]
+    }
+  }
+})
+</script>
+
+<template>
+  <n-flex vertical align="start">
+    <n-switch v-model:value="active" />
+    <n-tree-select
+      :options="options"
+      default-value="Drive My Car"
+      :get-children="
+        active
+          ? (v) => (v.children?.length ? v.children : undefined)
+          : undefined
+      "
+      @update:value="handleUpdateValue"
+    />
+  </n-flex>
+</template>
diff --git a/src/tree-select/demos/zhCN/index.demo-entry.md b/src/tree-select/demos/zhCN/index.demo-entry.md
index fcfcb22043f..ce77e367b06 100644
--- a/src/tree-select/demos/zhCN/index.demo-entry.md
+++ b/src/tree-select/demos/zhCN/index.demo-entry.md
@@ -11,6 +11,7 @@ multiple.vue
 checkbox.vue
 check-strategy.vue
 filterable.vue
+node-display-mode.vue
 check-strategy-debug.vue
 action.vue
 async.vue
diff --git a/src/tree-select/demos/zhCN/node-display-mode.demo.vue b/src/tree-select/demos/zhCN/node-display-mode.demo.vue
new file mode 100644
index 00000000000..d05faad7dff
--- /dev/null
+++ b/src/tree-select/demos/zhCN/node-display-mode.demo.vue
@@ -0,0 +1,171 @@
+<markdown>
+  # 节点展示方式
+
+  你可以使用 `get-children` 实现不同的节点展示方式
+  </markdown>
+
+<script lang="ts">
+import type { TreeSelectOption } from 'naive-ui'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      active: ref(false),
+      handleUpdateValue(
+        value: string | number | Array<string | number> | null,
+        option: TreeSelectOption | null | Array<TreeSelectOption | null>
+      ) {
+        console.log(value, option)
+      },
+      options: [
+        {
+          label: 'Rubber Soul',
+          key: 'Rubber Soul',
+          children: [
+            {
+              label:
+                'Everybody\'s Got Something to Hide Except Me and My Monkey',
+              key: 'Everybody\'s Got Something to Hide Except Me and My Monkey',
+              children: []
+            },
+            {
+              label: 'Drive My Car',
+              key: 'Drive My Car',
+              disabled: true,
+              children: []
+            },
+            {
+              label: 'Norwegian Wood',
+              key: 'Norwegian Wood',
+              children: []
+            },
+            {
+              label: 'You Won\'t See',
+              key: 'You Won\'t See',
+              disabled: true,
+              children: []
+            },
+            {
+              label: 'Nowhere Man',
+              key: 'Nowhere Man',
+              children: []
+            },
+            {
+              label: 'Think For Yourself',
+              key: 'Think For Yourself',
+              children: []
+            },
+            {
+              label: 'The Word',
+              key: 'The Word',
+              children: []
+            },
+            {
+              label: 'Michelle',
+              key: 'Michelle',
+              disabled: true,
+              children: []
+            },
+            {
+              label: 'What goes on',
+              key: 'What goes on',
+              children: []
+            },
+            {
+              label: 'Girl',
+              key: 'Girl',
+              children: []
+            },
+            {
+              label: 'I\'m looking through you',
+              key: 'I\'m looking through you',
+              children: []
+            },
+            {
+              label: 'In My Life',
+              key: 'In My Life',
+              children: []
+            },
+            {
+              label: 'Wait',
+              key: 'Wait',
+              children: []
+            }
+          ]
+        },
+        {
+          label: 'Let It Be',
+          key: 'Let It Be Album',
+          children: [
+            {
+              label: 'Two Of Us',
+              key: 'Two Of Us'
+            },
+            {
+              label: 'Dig A Pony',
+              key: 'Dig A Pony'
+            },
+            {
+              label: 'Across The Universe',
+              key: 'Across The Universe'
+            },
+            {
+              label: 'I Me Mine',
+              key: 'I Me Mine'
+            },
+            {
+              label: 'Dig It',
+              key: 'Dig It'
+            },
+            {
+              label: 'Let It Be',
+              key: 'Let It Be'
+            },
+            {
+              label: 'Maggie Mae',
+              key: 'Maggie Mae'
+            },
+            {
+              label: 'I\'ve Got A Feeling',
+              key: 'I\'ve Got A Feeling'
+            },
+            {
+              label: 'One After 909',
+              key: 'One After 909'
+            },
+            {
+              label: 'The Long And Winding Road',
+              key: 'The Long And Winding Road'
+            },
+            {
+              label: 'For You Blue',
+              key: 'For You Blue'
+            },
+            {
+              label: 'Get Back',
+              key: 'Get Back'
+            }
+          ]
+        }
+      ]
+    }
+  }
+})
+</script>
+
+<template>
+  <n-flex vertical align="start">
+    <n-switch v-model:value="active" />
+    <n-tree-select
+      :options="options"
+      default-value="Drive My Car"
+      :get-children="
+        active
+          ? (v) => (v.children?.length ? v.children : undefined)
+          : undefined
+      "
+      @update:value="handleUpdateValue"
+    />
+  </n-flex>
+</template>
diff --git a/src/tree/demos/enUS/index.demo-entry.md b/src/tree/demos/enUS/index.demo-entry.md
index 1531acae0d7..eafa2115ab4 100644
--- a/src/tree/demos/enUS/index.demo-entry.md
+++ b/src/tree/demos/enUS/index.demo-entry.md
@@ -24,6 +24,7 @@ node-props.vue
 show-line.vue
 checkbox-placement.vue
 override-click-behavior.vue
+node-display-mode.vue
 ```
 
 ## API
diff --git a/src/tree/demos/enUS/node-display-mode.demo.vue b/src/tree/demos/enUS/node-display-mode.demo.vue
new file mode 100644
index 00000000000..c6b8765d723
--- /dev/null
+++ b/src/tree/demos/enUS/node-display-mode.demo.vue
@@ -0,0 +1,62 @@
+<markdown>
+  # Node display mode
+
+  You can use `get-children` to implement different ways of displaying nodes.
+  </markdown>
+
+<script lang="ts">
+import type { TreeOption } from 'naive-ui'
+import { repeat } from 'seemly'
+import { defineComponent, ref } from 'vue'
+
+function createData(level = 3, baseKey = ''): TreeOption[] | undefined {
+  if (!level)
+    return undefined
+  return repeat(6 - level, undefined).map((_, index) => {
+    const key = `${baseKey}${level}${index}`
+    return {
+      label: createLabel(level),
+      key,
+      children: level === 2 ? [] : createData(level - 1, key)
+    }
+  })
+}
+function createLabel(level: number): string {
+  if (level === 4)
+    return 'Out of Tao, One is born'
+  if (level === 3)
+    return 'Out of One, Two'
+  if (level === 2)
+    return 'Out of Two, Three'
+  if (level === 1)
+    return 'Out of Three, the created universe'
+  return ''
+}
+export default defineComponent({
+  setup() {
+    return {
+      data: createData(),
+      defaultExpandedKeys: ref(['30', '31']),
+      active: ref(false)
+    }
+  }
+})
+</script>
+
+<template>
+  <n-flex vertical align="start">
+    <n-switch v-model:value="active" />
+    <n-tree
+      block-line
+      :data="data"
+      :default-expanded-keys="defaultExpandedKeys"
+      expand-on-click
+      checkable
+      :get-children="
+        active
+          ? (v) => (v.children?.length ? v.children : undefined)
+          : undefined
+      "
+    />
+  </n-flex>
+</template>
diff --git a/src/tree/demos/zhCN/index.demo-entry.md b/src/tree/demos/zhCN/index.demo-entry.md
index 08b9fe88942..0232b1ff5f2 100644
--- a/src/tree/demos/zhCN/index.demo-entry.md
+++ b/src/tree/demos/zhCN/index.demo-entry.md
@@ -24,6 +24,7 @@ node-props.vue
 show-line.vue
 checkbox-placement.vue
 override-click-behavior.vue
+node-display-mode.vue
 check-strategy-debug.vue
 change-debug.vue
 scrollbar-debug.vue
diff --git a/src/tree/demos/zhCN/node-display-mode.demo.vue b/src/tree/demos/zhCN/node-display-mode.demo.vue
new file mode 100644
index 00000000000..6543bd552c9
--- /dev/null
+++ b/src/tree/demos/zhCN/node-display-mode.demo.vue
@@ -0,0 +1,62 @@
+<markdown>
+  # 节点展示方式
+
+  你可以使用 `get-children` 实现不同的节点展示方式
+  </markdown>
+
+<script lang="ts">
+import type { TreeOption } from 'naive-ui'
+import { repeat } from 'seemly'
+import { defineComponent, ref } from 'vue'
+
+function createData(level = 3, baseKey = ''): TreeOption[] | undefined {
+  if (!level)
+    return undefined
+  return repeat(6 - level, undefined).map((_, index) => {
+    const key = `${baseKey}${level}${index}`
+    return {
+      label: createLabel(level),
+      key,
+      children: level === 2 ? [] : createData(level - 1, key)
+    }
+  })
+}
+function createLabel(level: number): string {
+  if (level === 4)
+    return '道生一'
+  if (level === 3)
+    return '一生二'
+  if (level === 2)
+    return '二生三'
+  if (level === 1)
+    return '三生万物'
+  return ''
+}
+export default defineComponent({
+  setup() {
+    return {
+      data: createData(),
+      defaultExpandedKeys: ref(['30', '31']),
+      active: ref(false)
+    }
+  }
+})
+</script>
+
+<template>
+  <n-flex vertical align="start">
+    <n-switch v-model:value="active" />
+    <n-tree
+      block-line
+      :data="data"
+      :default-expanded-keys="defaultExpandedKeys"
+      expand-on-click
+      checkable
+      :get-children="
+        active
+          ? (v) => (v.children?.length ? v.children : undefined)
+          : undefined
+      "
+    />
+  </n-flex>
+</template>