From 5c23d97daf2a4a589398fae423f788e851901fca Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 25 Jan 2022 10:17:32 +0800
Subject: [PATCH] doc: add tree-select demo

---
 .../__tests__/__snapshots__/demo.test.js.snap | 11 +++
 components/tree-select/demo/index.vue         |  3 +
 components/tree-select/demo/replaceFields.vue | 78 +++++++++++++++++++
 3 files changed, 92 insertions(+)
 create mode 100644 components/tree-select/demo/replaceFields.vue

diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
index 15b470777..ed59dd8ad 100644
--- a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
@@ -88,6 +88,17 @@ exports[`renders ./components/tree-select/demo/multiple.vue correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/tree-select/demo/replaceFields.vue correctly 1`] = `
+<div style="width: 100%;" class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search" customslots="[object Object]">
+  <!---->
+  <!---->
+  <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" type="search"></span>
+    <!----><span class="ant-select-selection-placeholder">Please select</span>
+  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/tree-select/demo/suffix.vue correctly 1`] = `
 <div class="ant-space ant-space-vertical" style="width: 100%;">
   <div class="ant-space-item" style="margin-bottom: 8px;">
diff --git a/components/tree-select/demo/index.vue b/components/tree-select/demo/index.vue
index 4a3b57646..dd6177efe 100644
--- a/components/tree-select/demo/index.vue
+++ b/components/tree-select/demo/index.vue
@@ -10,6 +10,7 @@
     <treeLineVue />
     <virtualScrollVue />
     <customTagRenderVue />
+    <replaceFieldsVue />
   </demo-sort>
 </template>
 <script lang="ts">
@@ -23,6 +24,7 @@ import Highlight from './highlight.vue';
 import treeLineVue from './tree-line.vue';
 import virtualScrollVue from './virtual-scroll.vue';
 import customTagRenderVue from './custom-tag-render.vue';
+import replaceFieldsVue from './replaceFields.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -41,6 +43,7 @@ export default defineComponent({
     treeLineVue,
     virtualScrollVue,
     customTagRenderVue,
+    replaceFieldsVue,
   },
   setup() {
     return {};
diff --git a/components/tree-select/demo/replaceFields.vue b/components/tree-select/demo/replaceFields.vue
new file mode 100644
index 000000000..86b90c986
--- /dev/null
+++ b/components/tree-select/demo/replaceFields.vue
@@ -0,0 +1,78 @@
+<docs>
+---
+order: 9
+title:
+  zh-CN: 自定义字段
+  en-US: ReplaceFields
+---
+
+## zh-CN
+
+fieldNames 替换 treeNode中 title,key,children 字段为treeData中对应的字段
+
+## en-US
+
+Replace the title,key and children fields in treeNode with the corresponding fields in treeData.
+
+</docs>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    show-search
+    style="width: 100%"
+    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+    placeholder="Please select"
+    allow-clear
+    tree-default-expand-all
+    :tree-data="treeData"
+    :field-names="{
+      children: 'children',
+      label: 'name',
+      key: 'key',
+      value: 'value',
+    }"
+  ></a-tree-select>
+</template>
+<script lang="ts">
+import type { TreeSelectProps } from 'ant-design-vue';
+import { defineComponent, ref, watch } from 'vue';
+export default defineComponent({
+  setup() {
+    const value = ref<string>();
+    const treeData = ref<TreeSelectProps['treeData']>([
+      {
+        name: 'parent 1',
+        value: 'parent 1',
+        children: [
+          {
+            name: 'parent 1-0',
+            value: 'parent 1-0',
+            children: [
+              {
+                name: 'my leaf',
+                value: 'leaf1',
+              },
+              {
+                name: 'your leaf',
+                value: 'leaf2',
+              },
+            ],
+          },
+          {
+            name: 'parent 1-1',
+            value: 'parent 1-1',
+          },
+        ],
+      },
+    ]);
+    watch(value, () => {
+      console.log(value.value);
+    });
+    return {
+      value,
+      treeData,
+    };
+  },
+});
+</script>