docs: 🐞change the default setting of "treeNodeFilterProp" from "va… (#6610)

* docs: 📃change the default  setting of  "treeNodeFilterProp" from  "value" to "label"

* revert: ↩revert this config and create another pr to commit

components/tree-select/demo/basic.vue

@@ -26,10 +26,11 @@ The most basic usage.
     allow-clear
     tree-default-expand-all
     :tree-data="treeData"
+    tree-node-filter-prop="label"
   >
-    <template #title="{ value: val, title }">
+    <template #title="{ value: val, label }">
       <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
-      <template v-else>{{ title }}</template>
+      <template v-else>{{ label }}</template>
     </template>
   </a-tree-select>
 </template>
@@ -41,25 +42,25 @@ export default defineComponent({
     const value = ref<string>();
     const treeData = ref<TreeSelectProps['treeData']>([
       {
-        title: 'parent 1',
+        label: 'parent 1',
         value: 'parent 1',
         children: [
           {
-            title: 'parent 1-0',
+            label: 'parent 1-0',
             value: 'parent 1-0',
             children: [
               {
-                title: 'my leaf',
+                label: 'my leaf',
                 value: 'leaf1',
               },
               {
-                title: 'your leaf',
+                label: 'your leaf',
                 value: 'leaf2',
               },
             ],
           },
           {
-            title: 'parent 1-1',
+            label: 'parent 1-1',
             value: 'parent 1-1',
           },
         ],

components/tree-select/demo/checkable.vue

@@ -24,6 +24,7 @@ Multiple and checkable.
     allow-clear
     :show-checked-strategy="SHOW_PARENT"
     placeholder="Please select"
+    tree-node-filter-prop="label"
   />
 </template>
 <script lang="ts">
@@ -34,31 +35,31 @@ const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 
 const treeData: TreeSelectProps['treeData'] = [
   {
-    title: 'Node1',
+    label: 'Node1',
     value: '0-0',
     children: [
       {
-        title: 'Child Node1',
+        label: 'Child Node1',
         value: '0-0-0',
       },
     ],
   },
   {
-    title: 'Node2',
+    label: 'Node2',
     value: '0-1',
 
     children: [
       {
-        title: 'Child Node3',
+        label: 'Child Node3',
         value: '0-1-0',
         disabled: true,
       },
       {
-        title: 'Child Node4',
+        label: 'Child Node4',
         value: '0-1-1',
       },
       {
-        title: 'Child Node5',
+        label: 'Child Node5',
         value: '0-1-2',
       },
     ],

components/tree-select/demo/custom-tag-render.vue

@@ -28,15 +28,16 @@ Allows for custom rendering of tags.
     :show-checked-strategy="SHOW_ALL"
     tree-default-expand-all
     :tree-data="treeData"
+    tree-node-filter-prop="label"
   >
     <template #tagRender="{ label, closable, onClose, option }">
       <a-tag :closable="closable" :color="option.color" style="margin-right: 3px" @close="onClose">
         {{ label }}&nbsp;&nbsp;
       </a-tag>
     </template>
-    <template #title="{ value: val, title }">
+    <template #title="{ value: val, label }">
       <b v-if="val === 'parent 1-1'" style="color: #08c">{{ val }}</b>
-      <template v-else>{{ title }}</template>
+      <template v-else>{{ label }}</template>
     </template>
   </a-tree-select>
 </template>
@@ -50,29 +51,29 @@ export default defineComponent({
     const value = ref<string[]>(['parent 1', 'parent 1-0', 'leaf1']);
     const treeData = ref<TreeSelectProps['treeData']>([
       {
-        title: 'parent 1',
+        label: 'parent 1',
         value: 'parent 1',
         color: 'pink',
         children: [
           {
-            title: 'parent 1-0',
+            label: 'parent 1-0',
             value: 'parent 1-0',
             color: 'orange',
             children: [
               {
-                title: 'my leaf',
+                label: 'my leaf',
                 value: 'leaf1',
                 color: 'green',
               },
               {
-                title: 'your leaf',
+                label: 'your leaf',
                 value: 'leaf2',
                 color: 'cyan',
               },
             ],
           },
           {
-            title: 'parent 1-1',
+            label: 'parent 1-1',
             value: 'parent 1-1',
             color: 'blue',
           },

components/tree-select/demo/highlight.vue

@@ -27,12 +27,13 @@ Search Value Hightlight
     allow-clear
     tree-default-expand-all
     :tree-data="treeData"
+    tree-node-filter-prop="label"
   >
-    <template #title="{ value: val, title }">
+    <template #title="{ value: val, label }">
       <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
       <template v-else>
         <template
-          v-for="(fragment, i) in title
+          v-for="(fragment, i) in label
             .toString()
             .split(new RegExp(`(?<=${searchValue})|(?=${searchValue})`, 'i'))"
         >
@@ -57,25 +58,25 @@ export default defineComponent({
     const value = ref<string>();
     const treeData = ref<TreeSelectProps['treeData']>([
       {
-        title: 'parent 1',
+        label: 'parent 1',
         value: 'parent 1',
         children: [
           {
-            title: 'parent 1-0',
+            label: 'parent 1-0',
             value: 'parent 1-0',
             children: [
               {
-                title: 'my leaf',
+                label: 'my leaf',
                 value: 'leaf1',
               },
               {
-                title: 'your leaf',
+                label: 'your leaf',
                 value: 'leaf2',
               },
             ],
           },
           {
-            title: 'parent 1-1',
+            label: 'parent 1-1',
             value: 'parent 1-1',
           },
         ],

components/tree-select/demo/multiple.vue

@@ -27,10 +27,11 @@ Multiple selection usage.
     multiple
     tree-default-expand-all
     :tree-data="treeData"
+    tree-node-filter-prop="label"
   >
-    <template #title="{ value: val, title }">
+    <template #title="{ value: val, label }">
       <b v-if="val === 'parent 1-1'" style="color: #08c">{{ val }}</b>
-      <template v-else>{{ title }}</template>
+      <template v-else>{{ label }}</template>
     </template>
   </a-tree-select>
 </template>
@@ -43,25 +44,25 @@ export default defineComponent({
     const value = ref<string[]>([]);
     const treeData = ref<TreeSelectProps['treeData']>([
       {
-        title: 'parent 1',
+        label: 'parent 1',
         value: 'parent 1',
         children: [
           {
-            title: 'parent 1-0',
+            label: 'parent 1-0',
             value: 'parent 1-0',
             children: [
               {
-                title: 'my leaf',
+                label: 'my leaf',
                 value: 'leaf1',
               },
               {
-                title: 'your leaf',
+                label: 'your leaf',
                 value: 'leaf2',
               },
             ],
           },
           {
-            title: 'parent 1-1',
+            label: 'parent 1-1',
             value: 'parent 1-1',
           },
         ],

components/tree-select/demo/replaceFields.vue

@@ -31,6 +31,7 @@ Replace the title,key and children fields in treeNode with the corresponding fie
       label: 'name',
       value: 'value',
     }"
+    tree-node-filter-prop="name"
   ></a-tree-select>
 </template>
 <script lang="ts">

components/tree-select/demo/suffix.vue

@@ -27,6 +27,12 @@ The most basic usage.
       allow-clear
       tree-default-expand-all
       :tree-data="treeData"
+      :field-names="{
+        children: 'children',
+        value: 'value',
+        label: 'title',
+      }"
+      tree-node-filter-prop="title"
     >
       <template #suffixIcon><SmileOutlined /></template>
     </a-tree-select>
@@ -42,6 +48,12 @@ The most basic usage.
       show-arrow
       tree-default-expand-all
       :tree-data="treeData"
+      :field-names="{
+        children: 'children',
+        value: 'value',
+        label: 'title',
+      }"
+      tree-node-filter-prop="title"
     >
       <template #suffixIcon><SmileOutlined /></template>
     </a-tree-select>