docs: [Cascader] Updated treeNodeFilterProp API usage instructions

content/input/cascader/index-en-US.md

@@ -138,7 +138,11 @@ import { Cascader } from '@douyinfe/semi-ui';
 
 ### Searchable
 
-Use `filterTreeNode` to support search input. By default it searches the `value` property of the data. You can use `treeNodeFilterProp` to set another property to search or pass in a function to `filterTreeNode` to customize search behavior.
+Use `filterTreeNode` to support search input. 
+
+By default, the `label` value is searched (using the includes method of the string for matching, case-insensitive). You can specify other attribute values ​​​​through `treeNodeFilterProp` to search. For example, If `label` is ReactNode, you can use other fields in treeData to store plain text, and specify the field for search through `treeNodeFilterProp`.
+
+The default search results will only display the paths of leaf nodes. If you want to display more results, you can set `filterLeafOnly` to `false`.
 
 ```jsx live=true
 import React from 'react';
@@ -184,10 +188,56 @@ import { Cascader } from '@douyinfe/semi-ui';
                 }
             ],
         }];
+    const labelNodeTreeData = [{
+        label: <Tooltip content="Other info">Impressionism</Tooltip>,
+        labelText: 'Impressionism',
+        value: 'impressionism',
+        children: [
+            {
+                label: <Tooltip content="Other info">Visual Arts</Tooltip>,
+                labelText: 'Visual Arts',
+                value: 'visualArts',
+                children: [
+                    {
+                        label: <Tooltip content="Other info">Claude Monet</Tooltip>,
+                        labelText: 'Claude Monet',
+                        value: 'Monet',
+                    },
+                    {
+                        label: <Tooltip content="Other info">'Pierre-Auguste Renoir</Tooltip>,
+                        labelText: 'Pierre-Auguste Renoir',
+                        value: 'Renoir',
+                    },
+                    {
+                        label: <Tooltip content="Other info">Édouard Manet</Tooltip>,
+                        labelText: 'Édouard Manet',
+                        value: 'Manet',
+                    },
+                ],
+            },
+            {
+                label: <Tooltip content="Other info">Music</Tooltip>,
+                labelText: 'Music',
+                value: 'music',
+                children: [
+                    {
+                        label: <Tooltip content="Other info">Claude Debussy</Tooltip>,
+                        labelText: 'Claude Debussy',
+                        value: 'Debussy',
+                    },
+                    {
+                        label: <Tooltip content="Other info">Maurice Ravel</Tooltip>,
+                        labelText: 'Maurice Ravel',
+                        value: 'Ravel',
+                    }
+                ]
+            }
+        ],
+    }];
     return (
         <div>
             <Cascader
-                style={{ width: 400 }}
+                style={{ width: 300 }}
                 treeData={treeData}
                 placeholder="Search in label by default"
                 filterTreeNode
@@ -195,12 +245,32 @@ import { Cascader } from '@douyinfe/semi-ui';
             <br/>
             <br/>
             <Cascader
-                style={{ width: 400 }}
+                style={{ width: 300 }}
                 treeData={treeData}
                 placeholder="Search in value"
                 filterTreeNode
                 treeNodeFilterProp='value'
             />
+             <br/>
+            <br/>
+            <Typography.Title heading={6}>filterLeafOnly=false:</Typography.Title>
+            <Cascader
+                style={{ width: 300 }}
+                treeData={treeData}
+                placeholder="filterLeafOnly=false"
+                filterTreeNode
+                filterLeafOnly={false}
+            />
+            <br/>
+            <br/>
+            <Typography.Title heading={6}>Label is ReactNode, specify other attributes to search</Typography.Title>
+            <Cascader
+                style={{ width: 300 }}
+                treeData={labelNodeTreeData}
+                placeholder="Search for labelText"
+                filterTreeNode
+                treeNodeFilterProp='labelText'
+            />
         </div>
     );
 };

content/input/cascader/index.md

@@ -140,7 +140,11 @@ import { Cascader } from '@douyinfe/semi-ui';
 
 ### 可搜索的
 
-通过设置 `filterTreeNode` 属性可支持搜索功能。默认对 `label` 值进行搜索，可通过 `treeNodeFilterProp` 更改。
+通过设置 `filterTreeNode` 属性可支持搜索功能。
+
+默认对 `label` 值进行搜索（使用字符串的 includes 方法进行匹配，不区分大小写），可通过 `treeNodeFilterProp` 指定其他属性值进行搜索。
+如 `label` 为 ReactNode，可在 treeData 中使用其他字段存储纯文本，并通过 `treeNodeFilterProp` 指定该字段进行搜索。
+
 默认搜索结果只会展示叶子结点的路径，想要显示更多的结果，可以设置 `filterLeafOnly` 为 `false`。
 
 ```jsx live=true
@@ -188,6 +192,55 @@ import { Cascader, Typography } from '@douyinfe/semi-ui';
             ],
         }
     ];
+    const labelNodeTreeData = [
+        {
+            label: <Tooltip content="说明">浙江省</Tooltip>,
+            labelText: '浙江省',
+            value: 'zhejiang',
+            children: [
+                {
+                    label: <Tooltip content="说明">杭州市</Tooltip>,
+                    labelText: '杭州市',
+                    value: 'hangzhou',
+                    children: [
+                        {
+                            label: <Tooltip content="说明">西湖区</Tooltip>,
+                            labelText: '西湖区',
+                            value: 'xihu',
+                        },
+                        {
+                            label: <Tooltip content="说明">萧山区</Tooltip>,
+                            labelText: '萧山区',
+                            value: 'xiaoshan',
+                        },
+                        {
+                            label: <Tooltip content="说明">临安区</Tooltip>,
+                            labelText: '临安区',
+                            value: 'linan',
+                        },
+                    ],
+                },
+                {
+                    label: <Tooltip content="说明">宁波市</Tooltip>,
+                    labelText: '宁波市',
+                    value: 'ningbo',
+                    children: [
+                        {
+                            label: <Tooltip content="说明">海曙区</Tooltip>,
+                            labelText: '海曙区',
+                            value: 'haishu',
+                        },
+                        {
+                            label: <Tooltip content="说明">江北区</Tooltip>,
+                            labelText: '江北区',
+                            value: 'jiangbei',
+                        }
+                    ]
+                },
+            ],
+        }
+    ];
+
     return (
         <div>
             <Cascader
@@ -211,15 +264,27 @@ import { Cascader, Typography } from '@douyinfe/semi-ui';
             <Cascader
                 style={{ width: 300 }}
                 treeData={treeData}
-                placeholder="默认对label值进行搜索"
+                placeholder="filterLeafOnly=false"
                 filterTreeNode
                 filterLeafOnly={false}
             />
+            <br/>
+            <br/>
+            <Typography.Title heading={6}>Label 为 ReactNode，指定其他属性进行搜索</Typography.Title>
+            <Cascader
+                style={{ width: 300 }}
+                treeData={labelNodeTreeData}
+                placeholder="Search for labelText"
+                filterTreeNode
+                treeNodeFilterProp='labelText'
+            />
         </div>
     );
 };
 ```
 
+
+
 ### 可搜索的多选
 
 支持多选和搜索同时使用（version >= v1.28.0)，在这种场景下，可以通过按下 BackSpace 键来删除对应的已选项目。