{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/input/treeselect","result":{"data":{"current":{"frontmatter":{"title":"TreeSelect 树选择器","order":52,"brief":"树选择器用于多层级树形数据的结构化展示 & 选取，例如显示文件夹与文件的列表、显示组织架构成员列表等等。","icon":"doc-treeselect"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#多选","title":"多选"},{"url":"#限制标签展示数量","title":"限制标签展示数量"},{"url":"#可搜索的","title":"可搜索的"},{"url":"#搜索框位置","title":"搜索框位置"},{"url":"#尺寸大小","title":"尺寸大小"},{"url":"#默认展开","title":"默认展开"},{"url":"#禁用","title":"禁用"},{"url":"#严格禁用","title":"严格禁用"},{"url":"#受控","title":"受控"},{"url":"#节点选中关系","title":"节点选中关系"},{"url":"#开启搜索的展开受控","title":"开启搜索的展开受控"},{"url":"#虚拟化","title":"虚拟化"},{"url":"#动态更新数据","title":"动态更新数据"},{"url":"#异步加载数据","title":"异步加载数据"},{"url":"#自定义-trigger","title":"自定义 Trigger"},{"url":"#自定义渲染已选项","title":"自定义渲染已选项"}]},{"url":"#api参考","title":"API参考","items":[{"url":"#treeselect","title":"TreeSelect"},{"url":"#treenodedata","title":"TreeNodeData"},{"url":"#methods","title":"Methods"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 52,\n  \"category\": \"输入类\",\n  \"title\": \"TreeSelect 树选择器\",\n  \"icon\": \"doc-treeselect\",\n  \"brief\": \"树选择器用于多层级树形数据的结构化展示 & 选取，例如显示文件夹与文件的列表、显示组织架构成员列表等等。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar ApiType = makeShortcode(\"ApiType\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { TreeSelect } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6700\\u7B80\\u5355\\u7684\\u7528\\u6CD5\\uFF0C\\u9ED8\\u8BA4\\u4E3A\\u5355\\u9009\\u6A21\\u5F0F\\uFF0C\\u6BCF\\u4E00\\u7EA7\\u83DC\\u5355\\u9879\\u5747\\u53EF\\u9009\\u62E9\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n() => {\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n    return ( \\n        <TreeSelect\\n            style={{ width: 300 }}\\n            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n            treeData={treeData}\\n            placeholder=\\\"\\u8BF7\\u9009\\u62E9\\\"\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u591A\\u9009\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"multiple\"), \"\\uFF0C\\u53EF\\u4EE5\\u8FDB\\u884C\\u591A\\u9009\\u3002\\u591A\\u9009\\u60C5\\u51B5\\u4E0B\\u6240\\u6709\\u5B50\\u9879\\u90FD\\u88AB\\u9009\\u62E9\\u65F6\\uFF0C\\u81EA\\u52A8\\u52FE\\u9009\\u663E\\u793A\\u5176\\u7236\\u9879\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leafOnly\"), \" \\u5C5E\\u6027\\uFF0C\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u53EA\\u5C55\\u793A\\u53F6\\u5B50\\u8282\\u70B9\\uFF0C\\u540C\\u65F6 onChange \\u7684\\u56DE\\u8C03\\u5165\\u53C2\\u4E5F\\u4F1A\\u53EA\\u6709\\u53F6\\u5B50\\u8282\\u70B9\\u7684\\u503C\\u3002  \"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n() => {\\n    const treeData = [\\n        {\\n            label: 'Asia',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: 'China',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: 'Beijing',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: 'Shanghai',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                        {\\n                            label: 'Chengdu',\\n                            value: 'Chengdu',\\n                            key: '0-0-2',\\n                        },\\n                    ],\\n                },\\n                {\\n                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                    children: [\\n                        {\\n                            label: 'Osaka',\\n                            value: 'Osaka',\\n                            key: '0-1-0'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: 'North America',\\n            value: 'North America',\\n            key: '1',\\n            children: [\\n                {\\n                    label: 'United States',\\n                    value: 'United States',\\n                    key: '1-0'\\n                },\\n                {\\n                    label: 'Canada',\\n                    value: 'Canada',\\n                    key: '1-1'\\n                }\\n            ]\\n        }\\n    ];\\n    return ( \\n        <div>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                multiple\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                placeholder=\\\"\\u8BF7\\u9009\\u62E9\\\"\\n            />\\n            <br/>\\n            <br/>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                leafOnly\\n                placeholder=\\\"\\u53EA\\u6E32\\u67D3\\u53F6\\u5B50\\u8282\\u70B9\\\"\\n            />\\n            <br/>\\n            <br/>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9650\\u5236\\u6807\\u7B7E\\u5C55\\u793A\\u6570\\u91CF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u591A\\u9009\\u7684\\u573A\\u666F\\u4E2D\\uFF0C\\u5229\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maxTagCount\"), \" \\u53EF\\u4EE5\\u9650\\u5236\\u5C55\\u793A\\u7684\\u6807\\u7B7E\\u6570\\u91CF\\uFF0C\\u8D85\\u51FA\\u90E8\\u5206\\u5C06\\u4EE5 +N \\u7684\\u65B9\\u5F0F\\u5C55\\u793A\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showRestTagsPopover\"), \" (>= v2.22.0) \\u53EF\\u4EE5\\u8BBE\\u7F6E\\u5728\\u8D85\\u51FA \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maxTagCount\"), \" \\u540E\\uFF0Chover +N \\u662F\\u5426\\u663E\\u793A Popover\\uFF0C\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \"\\u3002\\u5E76\\u4E14\\uFF0C\\u8FD8\\u53EF\\u4EE5\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"restTagsPopoverProps\"), \" \\u5C5E\\u6027\\u4E2D\\u914D\\u7F6E Popover\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n() => {\\n    const treeData = [\\n        {\\n            label: 'Asia',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: 'China',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: 'Beijing',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: 'Shanghai',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                        {\\n                            label: 'Chengdu',\\n                            value: 'Chengdu',\\n                            key: '0-0-2',\\n                        },\\n                    ],\\n                },\\n                {\\n                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                    children: [\\n                        {\\n                            label: 'Osaka',\\n                            value: 'Osaka',\\n                            key: '0-1-0'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: 'North America',\\n            value: 'North America',\\n            key: '1',\\n            children: [\\n                {\\n                    label: 'United States',\\n                    value: 'United States',\\n                    key: '1-0'\\n                },\\n                {\\n                    label: 'Canada',\\n                    value: 'Canada',\\n                    key: '1-1'\\n                }\\n            ]\\n        }\\n    ];\\n\\n    const textStyle = { margin: '20px 0 10px' };\\n\\n    return ( \\n        <div>\\n            <h4 style={textStyle}>maxTagCount=2:</h4>\\n            <TreeSelect\\n                multiple\\n                maxTagCount={2}\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                placeholder=\\\"\\u5F53\\u9009\\u4E2D\\u6807\\u7B7E\\u8D85\\u8FC7\\u4E24\\u4E2A\\u5C06\\u6298\\u53E0\\\"\\n                defaultValue={['Beijing', 'Chengdu', 'Canada']}\\n            />\\n            <h4 style={textStyle}>maxTagCount=2, showRestTagsPopover:</h4>\\n            <TreeSelect\\n                showRestTagsPopover={true}\\n                restTagsPopoverProps={{ position: 'top' }}\\n                multiple\\n                maxTagCount={2}\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                placeholder=\\\"hover +N \\u67E5\\u770B\\\"\\n                defaultValue={['Beijing', 'Chengdu', 'Canada']}\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u641C\\u7D22\\u7684\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterTreeNode\"), \" \\u5C5E\\u6027\\u53EF\\u652F\\u6301\\u641C\\u7D22\\u529F\\u80FD\\u3002\\u9ED8\\u8BA4\\u5BF9 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" \\u503C\\u8FDB\\u884C\\u641C\\u7D22\\uFF0C\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeNodeFilterProp\"), \" \\u66F4\\u6539\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u53EA\\u5E0C\\u671B\\u5C55\\u793A\\u8FC7\\u6EE4\\u540E\\u7684\\u7ED3\\u679C\\uFF0C\\u53EF\\u4EE5\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showFilteredOnly\"), \" \\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u60F3\\u8981\\u83B7\\u53D6\\u641C\\u7D22\\u7ED3\\u679C\\u7684\\u5177\\u4F53\\u4FE1\\u606F\\uFF0C\\u53EF\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onSearch\"), \" \\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u51FD\\u6570\\u5177\\u4F53\\u53C2\\u6570\\u89C1 API \\u5217\\u8868\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { TreeSelect, Switch } from '@douyinfe/semi-ui';\\n() => {\\n    const [showFilteredOnly, setShowFilteredOnly] = useState(false);\\n\\n    const treeData = [\\n        {\\n            label: 'Asia',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: 'China',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: 'Beijing',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: 'Shanghai',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n                {\\n                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                    children: [\\n                        {\\n                            label: 'Osaka',\\n                            value: 'Osaka',\\n                            key: '0-1-0'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: 'North America',\\n            value: 'North America',\\n            key: '1',\\n            children: [\\n                {\\n                    label: 'United States',\\n                    value: 'United States',\\n                    key: '1-0'\\n                },\\n                {\\n                    label: 'Canada',\\n                    value: 'Canada',\\n                    key: '1-1'\\n                }\\n            ]\\n        }\\n    ];\\n\\n    function onSearch(inputValue, filteredExpandedKeys, filteredNodes) {\\n        console.log('onSearch', inputValue, filteredExpandedKeys, filteredNodes);\\n    }\\n\\n    return (\\n        <>\\n            <span>showFilteredOnly</span>\\n            <Switch\\n                checked={showFilteredOnly}\\n                onChange={setShowFilteredOnly}\\n                size=\\\"small\\\"\\n            />\\n            <br/>\\n            <br/>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                filterTreeNode\\n                showFilteredOnly={showFilteredOnly}\\n                placeholder=\\\"\\u5355\\u9009\\u53EF\\u641C\\u7D22\\u7684\\\"\\n                onSearch={onSearch}\\n            />\\n            <br/>\\n            <br/>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                filterTreeNode\\n                maxTagCount={2}\\n                showFilteredOnly={showFilteredOnly}\\n                placeholder=\\\"\\u591A\\u9009\\u53EF\\u641C\\u7D22\\u7684\\\"\\n                searchPlaceholder=\\\"\\u8BF7\\u8F93\\u5165\\u5173\\u952E\\u5B57\\u5F00\\u59CB\\u641C\\u7D22\\\"\\n                onSearch={onSearch}\\n            />\\n            <br/>\\n            <br/>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                filterTreeNode\\n                maxTagCount={2}\\n                showFilteredOnly={showFilteredOnly}\\n                placeholder=\\\"\\u641C\\u7D22\\u6846autofocus\\\"\\n                searchPlaceholder=\\\"autofocus\\\"\\n                searchAutoFocus\\n                onSearch={onSearch}\\n            />\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u641C\\u7D22\\u6846\\u4F4D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"searchPosition\"), \" \\u6765\\u8BBE\\u7F6E\\u641C\\u7D22\\u6846\\u7684\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dropdown\"), \"(\\u9ED8\\u8BA4)\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"trigger\"), \"\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53\\u8F93\\u5165\\u6846\\u4F4D\\u4E8E trigger \\u65F6: \"), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u641C\\u7D22\\u6846\\u5360\\u4F4D\\u7B26\\u7531 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"placeholder\"), \" \\u63A7\\u5236\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"showClear=true\"), \" \\u65F6\\uFF0C\\u70B9\\u51FB\\u8F93\\u5165\\u6846\\u7684\\u6E05\\u7A7A\\u6309\\u94AE\\uFF0C\\u5C06\\u540C\\u65F6\\u6E05\\u7A7A inputValue \\u548C value\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const treeData = [\\n        {\\n            label: 'Asia',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: 'China',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: 'Beijing',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: 'Shanghai',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n                {\\n                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                    children: [\\n                        {\\n                            label: 'Osaka',\\n                            value: 'Osaka',\\n                            key: '0-1-0'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: 'North America',\\n            value: 'North America',\\n            key: '1',\\n            children: [\\n                {\\n                    label: 'United States',\\n                    value: 'United States',\\n                    key: '1-0'\\n                },\\n                {\\n                    label: 'Canada',\\n                    value: 'Canada',\\n                    key: '1-1'\\n                }\\n            ]\\n        }\\n    ];\\n    return (\\n        <>\\n            <TreeSelect\\n                searchPosition=\\\"trigger\\\"\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                filterTreeNode\\n                placeholder=\\\"\\u5355\\u9009\\\"\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                searchPosition=\\\"trigger\\\"\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                filterTreeNode\\n                maxTagCount={2}\\n                placeholder=\\\"\\u591A\\u9009\\\"\\n            />\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C3A\\u5BF8\\u5927\\u5C0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \" \\u8BBE\\u7F6E\\u5C3A\\u5BF8\\u5927\\u5C0F\\uFF0C\\u53EF\\u9009: 'small'\\u3001'default'\\u3001'large'\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n    return ( \\n        <div>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                size=\\\"small\\\"\\n                placeholder=\\\"small\\\"\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                size=\\\"default\\\"\\n                placeholder=\\\"default\\\"\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                size=\\\"large\\\"\\n                placeholder=\\\"large\\\"\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u5C55\\u5F00\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultExpandAll\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandAll\"), \" \\u5747\\u53EF\\u4EE5\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeSelect\"), \" \\u7684\\u9ED8\\u8BA4\\u5C55\\u5F00/\\u6536\\u8D77\\u72B6\\u6001\\u3002\\u4E8C\\u8005\\u7684\\u533A\\u522B\\u662F\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultExpandAll\"), \" \\u53EA\\u5728\\u521D\\u59CB\\u5316\\u65F6\\u751F\\u6548\\uFF0C\\u800C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandAll\"), \" \\u4E0D\\u4EC5\\u4F1A\\u5728\\u521D\\u59CB\\u5316\\u65F6\\u751F\\u6548\\uFF0C\\u5F53\\u6570\\u636E(\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeData\"), \")\\u53D1\\u751F\\u52A8\\u6001\\u66F4\\u65B0\\u65F6\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandAll\"), \" \\u4E5F\\u4ECD\\u7136\\u751F\\u6548\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u4E0B\\u9762\\u7684 demo \\u4E2D\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeData\"), \" \\u66F4\\u65B0\\u540E\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultExpandAll\"), \" \\u5931\\u6548\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandAll\"), \" \\u4ECD\\u7136\\u751F\\u6548\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useEffect, useState } from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n() => {\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n\\n    const [data, setData] = useState([]);\\n\\n    useEffect(() => {\\n        setTimeout(() => setData(treeData), 500);\\n    }, []);\\n\\n    return (\\n        <>\\n            <TreeSelect\\n                style={{ width: 300, marginBottom: 20 }}\\n                expandAll\\n                treeData={data}\\n                placeholder=\\\"expandAll\\\"\\n            />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                defaultExpandAll\\n                treeData={data}\\n                placeholder=\\\"defaultExpandAll\\\"\\n            />\\n        </>\\n    );\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7981\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n() => {\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n    return ( \\n        <div>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                disabled\\n                placeholder=\\\"\\u7981\\u7528\\u4E0B\\u62C9\\u83DC\\u5355\\\"\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                defaultValue={'Shanghai'}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                disabled\\n            />\\n            <br />\\n            <br />\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                defaultValue={['Shanghai', 'North America']}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                multiple\\n                disabled\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E25\\u683C\\u7981\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disableStrictly\"), \" \\u6765\\u5F00\\u542F\\u4E25\\u683C\\u7981\\u7528\\u3002\\u5F00\\u542F\\u4E25\\u683C\\u7981\\u7528\\u540E\\uFF0C\\u5F53\\u8282\\u70B9\\u662F disabled \\u7684\\u65F6\\u5019\\uFF0C\\u5219\\u4E0D\\u80FD\\u901A\\u8FC7\\u5B50\\u7EA7\\u6216\\u8005\\u7236\\u7EA7\\u7684\\u5173\\u7CFB\\u6539\\u53D8\\u9009\\u4E2D\\u72B6\\u6001\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4EE5\\u4E0B\\u9762\\u7684 demo \\u4E3A\\u4F8B\\uFF0C\\u8282\\u70B9\\\"\\u4E2D\\u56FD\\\"\\u5F00\\u542F\\u4E86\\u4E25\\u683C\\u7981\\u7528\\uFF0C\\u56E0\\u6B64\\uFF0C\\u5F53\\u6211\\u4EEC\\u6539\\u53D8\\u5176\\u7236\\u8282\\u70B9\\\"\\u4E9A\\u6D32\\\"\\u7684\\u9009\\u4E2D\\u72B6\\u6001\\u65F6\\uFF0C\\u4E5F\\u4E0D\\u4F1A\\u5F71\\u54CD\\u5230\\u8282\\u70B9\\\"\\u4E2D\\u56FD\\\"\\u7684\\u9009\\u4E2D\\u72B6\\u6001\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    disabled: true,\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n                {\\n                    label: '\\u65E5\\u672C',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n    return ( \\n        <div>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                disableStrictly\\n                multiple\\n                defaultValue={['Shanghai']}\\n            />\\n        </div>\\n    );\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53D7\\u63A7\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"value\"), \" \\u65F6\\u5373\\u4E3A\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\"), \" \\u4F7F\\u7528\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n() => {\\n    const [value, setValue] = useState('Shanghai');\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n    return (\\n        <TreeSelect\\n            style={{ width: 300 }}\\n            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n            treeData={treeData}\\n            value={value}\\n            placeholder=\\\"\\u8BF7\\u9009\\u62E9\\\"\\n            onChange={setValue}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8282\\u70B9\\u9009\\u4E2D\\u5173\\u7CFB\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7248\\u672C\\uFF1A>= 2.5.0\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u591A\\u9009\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"checkRelation\"), \" \\u6765\\u8BBE\\u7F6E\\u8282\\u70B9\\u4E4B\\u95F4\\u9009\\u4E2D\\u5173\\u7CFB\\u7684\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\uFF1A'related'\\uFF08\\u9ED8\\u8BA4\\uFF09\\u3001'unRelated'\\u3002\\u5F53\\u9009\\u4E2D\\u5173\\u7CFB\\u4E3A 'unRelated' \\u65F6\\uFF0C\\u610F\\u5473\\u7740\\u8282\\u70B9\\u4E4B\\u95F4\\u7684\\u9009\\u4E2D\\u4E92\\u4E0D\\u5F71\\u54CD\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n() => {\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n    return (\\n        <TreeSelect\\n            multiple\\n            defaultValue='Asia'\\n            checkRelation='unRelated'\\n            style={{ width: 300 }}\\n            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n            treeData={treeData}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5F00\\u542F\\u641C\\u7D22\\u7684\\u5C55\\u5F00\\u53D7\\u63A7\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandedKeys\"), \" \\u65F6\\u5373\\u4E3A\\u5C55\\u5F00\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onExpand\"), \" \\u4F7F\\u7528\\u3002\\u5F53\\u5C55\\u5F00\\u53D7\\u63A7\\u65F6\\uFF0C\\u5982\\u679C\\u5F00\\u542F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterTreeNode\"), \" \\u5E76\\u8FDB\\u884C\\u641C\\u7D22\\u662F\\u4E0D\\u4F1A\\u518D\\u81EA\\u52A8\\u5C55\\u5F00\\u8282\\u70B9\\u7684\\uFF0C\\u6B64\\u65F6\\uFF0C\\u8282\\u70B9\\u7684\\u5C55\\u5F00\\u5B8C\\u5168\\u7531 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandedKeys\"), \" \\u6765\\u63A7\\u5236\\u3002\\n\\u4F60\\u53EF\\u4EE5\\u5229\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onSearch\"), \" \\u7684\\u5165\\u53C2 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredExpandedKeys\"), \"\\uFF08version: >= 2.6.0\\uFF09 \\u6765\\u5B9E\\u73B0\\u5C55\\u5F00\\u53D7\\u63A7\\u65F6\\u7684\\u641C\\u7D22\\u5C55\\u5F00\\u6548\\u679C\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [expandedKeys, setExpandedKeys] = useState([]);\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n                {\\n                    label: '\\u65E5\\u672C',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n    return (\\n        <TreeSelect\\n            style={{ width: 300 }}\\n            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n            treeData={treeData}\\n            filterTreeNode\\n            expandedKeys={expandedKeys}\\n            onExpand={expandedKeys => {\\n                setExpandedKeys(expandedKeys);\\n            }}\\n            onSearch={(inputValue, filteredExpandedKeys, filteredNodes) => {\\n                setExpandedKeys([...filteredExpandedKeys, ...expandedKeys]);\\n            }}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u865A\\u62DF\\u5316\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5217\\u8868\\u865A\\u62DF\\u5316\\uFF0C\\u7528\\u4E8E\\u5927\\u91CF\\u6811\\u8282\\u70B9\\u7684\\u60C5\\u51B5\\u3002\\u5F00\\u542F\\u540E\\uFF0C\\u52A8\\u753B\\u6548\\u679C\\u5C06\\u88AB\\u5173\\u95ED\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"virtualize\"), \" \\u662F\\u4E00\\u4E2A\\u5305\\u542B\\u4E0B\\u5217\\u503C\\u7684\\u5BF9\\u8C61\\uFF1A \"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"height: \\u9AD8\\u5EA6\\u503C\\uFF0C\\u5982\\u679C\\u4E3A string \\u5FC5\\u987B\\u6709\\u8BA1\\u7B97\\u9AD8\\u5EA6\\u624D\\u80FD\\u88AB\\u6E32\\u67D3\\u51FA\\u6765\\uFF0C\\u5373\\u5176\\u7236\\u8282\\u70B9\\u6709 offsetHeight\\u3002\\u5EFA\\u8BAE\\u4F20\\u5165\\u6570\\u7EC4\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"width: \\u5BBD\\u5EA6\\u503C\\uFF0C\\u9ED8\\u8BA4 100%\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"itemSize: \\u6BCF\\u884C\\u7684treeNode\\u7684\\u9AD8\\u5EA6\\uFF0C\\u5FC5\\u4F20\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u5E26\\u641C\\u7D22\\u6846\\uFF0C\\u5EFA\\u8BAE\\u5F00\\u542F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showFilteredOnly\"), \" \\u51CF\\u5C11\\u591A\\u4F59\\u8282\\u70B9\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { TreeSelect, Button } from '@douyinfe/semi-ui';\\n() => {\\n    const [gData, setGData] = useState([]);\\n    const [total, setTotal] = useState(0);\\n\\n    function generateData(x = 5, y = 4, z = 3, data = []) {\\n        // x\\uFF1A\\u6BCF\\u4E00\\u7EA7\\u4E0B\\u7684\\u8282\\u70B9\\u603B\\u6570\\u3002y\\uFF1A\\u6BCF\\u7EA7\\u8282\\u70B9\\u91CC\\u6709y\\u4E2A\\u8282\\u70B9\\u3001\\u5B58\\u5728\\u5B50\\u8282\\u70B9\\u3002z\\uFF1A\\u6811\\u7684level\\u5C42\\u7EA7\\u6570\\uFF080\\u8868\\u793A\\u4E00\\u7EA7\\uFF09\\n        function _loop(_level, _preKey, _tns) {\\n            const preKey = _preKey || '0';\\n            const tns = _tns || data;\\n\\n            const children = [];\\n            for (let i = 0; i < x; i++) {\\n                const key = `${preKey}-${i}`;\\n                tns.push({ label: `${key}-\\u6807\\u7B7E`, key: `${key}-key`, value: `${key}-value` });\\n                if (i < y) {\\n                    children.push(key);\\n                }\\n            }\\n            if (_level < 0) {\\n                return tns;\\n            }\\n            const __level = _level - 1;\\n            children.forEach((key, index) => {\\n                tns[index].children = [];\\n                return _loop(__level, key, tns[index].children);\\n            });\\n\\n            return null;\\n        }\\n        _loop(z);\\n        \\n        function calcTotal(x, y, z) {\\n            const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);\\n            return rec(z + 1);\\n        }\\n        return { gData: data, total: calcTotal(x, y, z) };\\n    }\\n\\n    function onGen() {\\n        const { gData, total } = generateData();\\n        setGData(gData);\\n        setTotal(total);\\n    }\\n\\n    return (\\n        <div style={{ padding: '0 20px' }}>\\n            <Button onClick={onGen}>\\u751F\\u6210\\u6570\\u636E: </Button>\\n            <span>\\u5171 {total} \\u4E2A\\u8282\\u70B9</span>\\n            <br/>\\n            <br/>\\n            {gData.length ? (\\n                <TreeSelect\\n                    style={{ width: 300 }}\\n                    treeData={gData}\\n                    filterTreeNode\\n                    showFilteredOnly\\n                    placeholder=\\\"Please select\\\"\\n                    dropdownStyle={{ \\n                        // height: 300,\\n                        overflow: 'hidden'\\n                    }}\\n                    virtualize={{\\n                        itemSize: 28,\\n                        // dropDown height 300 minus search box height minus padding 8 * 2\\n                        // or if you set dropdown height, it will fill 100% of rest space\\n                        height: 236                \\n                    }}\\n                />\\n            ) : null}\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u52A8\\u6001\\u66F4\\u65B0\\u6570\\u636E\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { TreeSelect, Button } from '@douyinfe/semi-ui';\\n() => {\\n    const [treeData, setTreeData] = useState([]);\\n\\n    function add() {\\n        const itemLength = Math.floor(Math.random() * 5) + 1;\\n        const nextTreeData = new Array(itemLength).fill(0).map((v, i) => {\\n            const length = Math.floor(Math.random() * 3);\\n            const children = new Array(length).fill(0).map((cv, ci) => {\\n                const child = {\\n                    key: `${i}-${ci}`,\\n                    label: `Leaf-${i}-${ci}`,\\n                    value: `${i}-${ci}`\\n                };\\n                return child;\\n            });\\n            const item = {\\n                key: `${i}`,\\n                label: `Item-${i}`,\\n                value: `${i}`,\\n                children\\n            };\\n            return item;\\n        });\\n        setTreeData(nextTreeData);\\n    }\\n\\n    return (\\n        <>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}\\n                treeData={treeData}\\n                placeholder=\\\"\\u8BF7\\u9009\\u62E9\\\"\\n            />\\n            <br/>\\n            <br/>\\n            <Button onClick={add}>\\n                \\u52A8\\u6001\\u6539\\u53D8\\u6570\\u636E\\n            </Button>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5F02\\u6B65\\u52A0\\u8F7D\\u6570\\u636E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loadData\"), \" \\u53EF\\u4EE5\\u52A8\\u6001\\u52A0\\u8F7D\\u6570\\u636E\\uFF0C\\u6B64\\u65F6\\u9700\\u8981\\u5728\\u6570\\u636E\\u4E2D\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"isLeaf\"), \" \\u6807\\u660E\\u53F6\\u5B50\\u8282\\u70B9\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { TreeSelect } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const initialData = [\\n        {\\n            label: 'Expand to load',\\n            value: '0',\\n            key: '0',\\n        },\\n        {\\n            label: 'Expand to load',\\n            value: '1',\\n            key: '1',\\n        },\\n        {\\n            label: 'Leaf Node',\\n            value: '2',\\n            key: '2',\\n            isLeaf: true,\\n        },\\n    ];\\n    const [treeData, setTreeData] = useState(initialData);\\n\\n    function updateTreeData(list, key, children) {\\n        return list.map(node => {\\n            if (node.key === key) {\\n                return { ...node, children };\\n            }\\n            if (node.children) {\\n                return { ...node, children: updateTreeData(node.children, key, children) };\\n            }\\n            return node;\\n        });\\n    }\\n\\n    function onLoadData({ key, children }) {\\n        return new Promise(resolve => {\\n            if (children) {\\n                resolve();\\n                return;\\n            }\\n            setTimeout(() => {\\n                setTreeData(origin =>\\n                    updateTreeData(origin, key, [\\n                        {\\n                            label: 'Child Node',\\n                            key: `${key}-0`,\\n                        },\\n                        {\\n                            label: 'Child Node',\\n                            key: `${key}-1`,\\n                        },\\n                    ]),\\n                );\\n                resolve();\\n            }, 1000);\\n        });\\n    }\\n    return (\\n        <TreeSelect\\n            loadData={onLoadData}\\n            treeData={treeData}\\n            style={{ width: 300 }}\\n            placeholder=\\\"\\u8BF7\\u9009\\u62E9\\\"\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49 Trigger\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u9ED8\\u8BA4\\u7684\\u89E6\\u53D1\\u5668\\u6837\\u5F0F\\u6EE1\\u8DB3\\u4E0D\\u4E86\\u4F60\\u7684\\u9700\\u6C42\\uFF0C\\u53EF\\u4EE5\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"triggerRender\"), \" \\u81EA\\u5B9A\\u4E49\\u9009\\u62E9\\u6846\\u7684\\u5C55\\u793A\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"triggerRender \\u5165\\u53C2\\u5982\\u4E0B:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"interface TriggerRenderProps {\\n    componentProps: TreeSelectProps;// \\u6240\\u6709\\u7528\\u6237\\u4F20\\u7ED9 TreeSelect \\u7684 props\\n    disabled: boolean;              // \\u662F\\u5426\\u7981\\u7528 TreeSelect\\n    value: TreeNodeData[];              // \\u5DF2\\u9009\\u4E2D\\u7684 node \\u7684\\u6570\\u636E\\n    inputValue: string;             // \\u5F53\\u524D input \\u6846\\u7684\\u8F93\\u5165\\u503C\\n    onClear: e => void;             // \\u7528\\u4E8E\\u6E05\\u7A7A\\u503C\\u7684\\u51FD\\u6570\\n    placeholder: string;            // placeholder\\n    /* \\u5220\\u9664\\u5355\\u4E2A item \\u65F6\\u8C03\\u7528\\u7684\\u51FD\\u6570\\uFF0C\\u4EE5 item \\u7684 key \\u4F5C\\u4E3A\\u5165\\u53C2\\uFF0C \\n     * \\u4ECE v2.32.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301 \\n    */\\n    onRemove: key => void;          \\n    /**\\n     * \\u7528\\u4E8E\\u5728 Input \\u6846\\u503C\\u66F4\\u65B0\\u65F6\\u5019\\u542F\\u52A8\\u641C\\u7D22\\uFF0C\\u5F53\\u4F60\\u5728 triggerRender \\u81EA\\u5B9A\\u4E49\\u7684\\n     * Input \\u7EC4\\u4EF6\\u503C\\u66F4\\u65B0\\u65F6\\uFF0C\\u4F60\\u5E94\\u8BE5\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\uFF0C\\u7528\\u4E8E\\u5411 TreeSelect \\u5185\\u90E8\\n     * \\u540C\\u6B65\\u72B6\\u6001, \\u4F7F\\u7528\\u540C\\u65F6\\u9700\\u8981\\u8BBE\\u7F6E filterTreeNode \\u53C2\\u6570\\u975E false, \\n     * searchPosition \\u4E3A 'trigger'\\n     * \\u4ECE v2.32.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301\\n    */\\n    onSearch: inputValue => void;   \\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState, useCallback, useMemo } from 'react';\\nimport { TreeSelect, Button, Tag, TagInput } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const treeData = useMemo(() => [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: '\\u4E9A\\u6D32',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: '\\u4E2D\\u56FD',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: '\\u5317\\u4EAC',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: '\\u4E0A\\u6D77',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: '\\u5317\\u7F8E\\u6D32',\\n            key: '1',\\n        }\\n    ], []);\\n\\n    const onValueChange = useCallback((value) => {\\n        console.log('onChange', value);\\n    });\\n\\n    const renderTrigger = useCallback((props) => {\\n        const { value, onSearch, onRemove, inputValue } = props;\\n        const tagInputValue = value.map(item => item.key);\\n        const renderTagInMultiple = (key) => {\\n            const label = value.find(item => item.key === key).label;\\n            const onCloseTag = (value, e, tagKey) => {\\n                onRemove(tagKey);\\n            };\\n            return <Tag style={{ marginLeft: 2 }} tagKey={key} key={key} onClose={onCloseTag} closable>{label}</Tag>;\\n        };\\n        return (\\n            <TagInput\\n                inputValue={inputValue}\\n                value={tagInputValue}\\n                onInputChange={onSearch}\\n                renderTagItem={renderTagInMultiple}\\n            />\\n        );\\n    }, []);\\n\\n    return (\\n        <TreeSelect\\n            triggerRender={renderTrigger}\\n            filterTreeNode\\n            searchPosition=\\\"trigger\\\"\\n            multiple\\n            treeData={treeData}\\n            placeholder='Custom Trigger'\\n            onChange={onValueChange}\\n            style={{ width: 300 }}\\n        />\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5DF2\\u9009\\u9879\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 renderSelectedItem \\u81EA\\u5B9A\\u4E49\\u9009\\u62E9\\u6846\\u4E2D\\u5DF2\\u9009\\u9879\\u6807\\u7B7E\\u7684\\u6E32\\u67D3\\u7ED3\\u6784\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5355\\u9009\\u65F6 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"renderSelectedItem(treeNode: TreeNodeData) => content:ReactNode\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u591A\\u9009\\u65F6 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"renderSelectedItem(treeNode: TreeNodeData, { index:number, onClose:function }) => { isRenderInTag:bool, content:ReactNode }\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"isRenderInTag \\u4E3A true \\u65F6\\uFF0C\\u4F1A\\u81EA\\u52A8\\u5C06 content \\u5305\\u88F9\\u5728 Tag \\u4E2D\\u6E32\\u67D3\\uFF08\\u5E26\\u6709\\u80CC\\u666F\\u8272\\u4EE5\\u53CA\\u5173\\u95ED\\u6309\\u94AE\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"isRenderInTag \\u4E3A false \\u65F6\\uFF0C\\u5C06\\u76F4\\u63A5\\u6E32\\u67D3\\u8FD4\\u56DE\\u7684 content\")))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState, useCallback, useMemo } from 'react';\\nimport { TreeSelect, Tag } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [value, setValue] = useState([]);\\n    const treeData = useMemo(() => [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        },\\n        {\\n            label: '\\u5357\\u7F8E\\u6D32',\\n            value: 'South America',\\n            key: '2',\\n        },\\n        {\\n            label: '\\u5357\\u6781\\u6D32',\\n            value: 'Antarctica',\\n            key: '3',\\n        },\\n    ], []);\\n    \\n    return (\\n        <>\\n            <h4>\\u5355\\u9009</h4>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                treeData={treeData}\\n                renderSelectedItem={item => item.label}\\n            />\\n            <h4>\\u591A\\u9009+ isRenderInTag=true</h4>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                treeData={treeData}\\n                multiple\\n                renderSelectedItem={(item, { index, onClose }) => ({ content: item.label, isRenderInTag: true })}\\n            />\\n            <h4>\\u591A\\u9009 + isRenderInTag=false</h4>\\n            <TreeSelect\\n                style={{ width: 300 }}\\n                treeData={treeData}\\n                multiple\\n                maxTagCount={2}\\n                renderSelectedItem={(item, { index, onClose }) => {\\n                    return ({ \\n                        content: (\\n                            <Tag \\n                                key={index} \\n                                color=\\\"white\\\" \\n                                closable \\n                                onClose={onClose}\\n                            >\\n                                {item.value}\\n                            </Tag>\\n                        ), \\n                        isRenderInTag: false\\n                    });\\n                }}\\n            />\\n        </>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API\\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"TreeSelect\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"arrowIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u53F3\\u4FA7\\u4E0B\\u62C9\\u7BAD\\u5934Icon\\uFF0C\\u5F53showClear\\u5F00\\u5173\\u6253\\u5F00\\u4E14\\u5F53\\u524D\\u6709\\u9009\\u4E2D\\u503C\\u65F6\\uFF0Chover\\u4F1A\\u4F18\\u5148\\u663E\\u793Aclear icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoAdjustOverflow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6D6E\\u5C42\\u88AB\\u906E\\u6321\\u65F6\\u662F\\u5426\\u81EA\\u52A8\\u8C03\\u6574\\u65B9\\u5411\\uFF08\\u6682\\u65F6\\u4EC5\\u652F\\u6301\\u7AD6\\u76F4\\u65B9\\u5411\\uFF0C\\u4E14\\u63D2\\u5165\\u7684\\u7236\\u7EA7\\u4E3A body\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoExpandParent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u81EA\\u52A8\\u5C55\\u5F00\\u7236\\u8282\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoMergeValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u81EA\\u52A8\\u5408\\u5E76 value\\u3002\\u5177\\u4F53\\u800C\\u8A00\\u662F\\uFF0C\\u5F00\\u542F\\u540E\\uFF0C\\u5F53\\u67D0\\u4E2A\\u7236\\u8282\\u70B9\\u88AB\\u9009\\u4E2D\\u65F6\\uFF0Cvalue \\u5C06\\u4E0D\\u5305\\u62EC\\u8BE5\\u8282\\u70B9\\u7684\\u5B50\\u5B59\\u8282\\u70B9\\u3002\\uFF08\\u5728leafOnly\\u4E3Afalse\\u7684\\u60C5\\u51B5\\u4E0B\\u751F\\u6548\\uFF09\\u3002v2.61.0 \\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"borderless\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\\u8FB9\\u6846\\u6A21\\u5F0F\\uFF0Cv2.33.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"checkRelation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u591A\\u9009\\u65F6\\uFF0C\\u8282\\u70B9\\u4E4B\\u95F4\\u9009\\u4E2D\\u72B6\\u6001\\u7684\\u5173\\u7CFB\\uFF0C\\u53EF\\u9009\\uFF1A'related'\\u3001'unRelated'\\u3002v2.5.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'related'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u62E9\\u6846\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"className\"), \" \\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clearIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u81EA\\u5B9A\\u4E49\\u6E05\\u9664\\u6309\\u94AE, showClear\\u4E3Atrue\\u65F6\\u6709\\u6548\\u3002v2.25.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clickToHide\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u62E9\\u540E\\u662F\\u5426\\u81EA\\u52A8\\u5173\\u95ED\\u4E0B\\u62C9\\u5F39\\u5C42\\uFF0C\\u4EC5\\u5355\\u9009\\u6A21\\u5F0F\\u6709\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clickTriggerToHide\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9762\\u677F\\u6253\\u5F00\\u72B6\\u6001\\u4E0B\\uFF0C\\u70B9\\u51FB Trigger \\u540E\\u662F\\u5426\\u5173\\u95ED\\u9762\\u677F\\u3002v2.32.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultExpandAll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u5728\\u521D\\u59CB\\u5316\\u65F6\\u662F\\u5426\\u5C55\\u5F00\\u6240\\u6709\\u8282\\u70B9\\u3002\\u800C\\u5982\\u679C\\u540E\\u7EED\\u6570\\u636E(\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeData\"), \")\\u53D1\\u751F\\u6539\\u53D8\\uFF0C\\u8FD9\\u4E2A api \\u662F\\u65E0\\u6CD5\\u5F71\\u54CD\\u8282\\u70B9\\u7684\\u5C55\\u5F00\\u60C5\\u51B5\\u7684\\uFF0C\\u5982\\u679C\\u6709\\u8FD9\\u4E2A\\u9700\\u8981\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"expandAll\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultExpandedKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u5C55\\u5F00\\u7684\\u8282\\u70B9\\uFF0C\\u663E\\u793A\\u5176\\u76F4\\u63A5\\u5B50\\u7EA7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"[\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultOpen\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u5C55\\u5F00\\u4E0B\\u62C9\\u83DC\\u5355\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u9ED8\\u8BA4\\u9009\\u4E2D\\u7684\\u6761\\u76EE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"string \\\\| number \\\\| TreeNodeData \\\\| (string \\\\| number \\\\| TreeNodeData)[]\",\n    mdxType: \"ApiType\"\n  }, \"ValueType\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disableStrictly\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u4E25\\u683C\\u7981\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dropdownClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u83DC\\u5355\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"className\"), \" \\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dropdownMatchSelectWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u83DC\\u5355\\u6700\\u5C0F\\u5BBD\\u5EA6\\u662F\\u5426\\u7B49\\u4E8ESelect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dropdownMargin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u83DC\\u5355\\u8BA1\\u7B97\\u6EA2\\u51FA\\u65F6\\u7684\\u589E\\u52A0\\u7684\\u5197\\u4F59\\u503C\\uFF0C\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/issues/549\"\n  }, \"issue#549\"), \"\\uFF0C\\u4F5C\\u7528\\u540C Tooltip margin\\u3002v2.25.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dropdownStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u83DC\\u5355\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"emptyContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u641C\\u7D22\\u65E0\\u7ED3\\u679C\\u65F6\\u5C55\\u793A\\u7684\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\u6682\\u65E0\\u6570\\u636E\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandAction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u5F00\\u903B\\u8F91\\uFF0C\\u53EF\\u9009 false, 'click', 'doubleClick'\\u3002\\u9ED8\\u8BA4\\u503C\\u4E3A false\\uFF0C\\u5373\\u4EC5\\u5F53\\u70B9\\u51FB\\u5C55\\u5F00\\u6309\\u94AE\\u65F6\\u624D\\u4F1A\\u5C55\\u5F00\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandAll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u662F\\u5426\\u9ED8\\u8BA4\\u5C55\\u5F00\\u6240\\u6709\\u8282\\u70B9\\uFF0C\\u82E5\\u540E\\u7EED\\u6570\\u636E(\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeData\"), \")\\u53D1\\u751F\\u6539\\u53D8\\uFF0C\\u9ED8\\u8BA4\\u7684\\u5C55\\u5F00\\u60C5\\u51B5\\u4E5F\\u662F\\u4F1A\\u53D7\\u5230\\u8FD9\\u4E2A api \\u5F71\\u54CD\\u7684\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandedKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\uFF08\\u53D7\\u63A7\\uFF09\\u5C55\\u5F00\\u7684\\u8282\\u70B9\\uFF0C\\u9ED8\\u8BA4\\u5C55\\u5F00\\u8282\\u70B9\\u663E\\u793A\\u5176\\u76F4\\u63A5\\u5B50\\u7EA7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5C55\\u5F00\\u56FE\\u6807\\uFF0C\\u4F7F\\u7528\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/navigation/tree#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%95%E5%BC%80%20Icon\"\n  }, \"\\u793A\\u4F8B\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode \", \"|\", \" (props: expandProps)=>ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"keyMaps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u8282\\u70B9\\u4E2D key\\u3001label\\u3001value \\u7684\\u5B57\\u6BB5\\u3002v2.47.0\\u540E\\u63D0\\u4F9B\\u3002\\u5982\\u679C keyMaps \\u4E2D\\u8BBE\\u7F6E label \\u7684\\u81EA\\u5B9A\\u4E49\\u540D\\u79F0\\u5E76\\u4E14\\u5F00\\u542F\\u4E86\\u641C\\u7D22\\uFF0C\\u4E3A\\u4FDD\\u8BC1\\u641C\\u7D22\\u6B63\\u786E\\uFF0C\\u9700\\u8981\\u5C06 treeNodeFilterProp \\u8BBE\\u7F6E\\u4E3A treeData \\u7684\\u952E\\u4E4B\\u4E00\\u6216\\u8005\\u901A\\u8FC7 filterTreeNode \\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filterTreeNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u6839\\u636E\\u8F93\\u5165\\u9879\\u8FDB\\u884C\\u7B5B\\u9009\\uFF0C\\u9ED8\\u8BA4\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeNodeFilterProp\"), \" \\u7684\\u503C\\u4F5C\\u4E3A\\u8981\\u7B5B\\u9009\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"TreeNodeData\"), \" \\u7684\\u5C5E\\u6027\\u503C, data \\u53C2\\u6570\\u81EA v2.28.0 \\u5F00\\u59CB\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \" \", mdx(ApiType, {\n    detail: \"(inputValue: string, treeNodeString: string, data?: TreeNodeData) => boolean\",\n    mdxType: \"ApiType\"\n  }, \"Function\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getPopupContainer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u7236\\u7EA7 DOM\\uFF0C\\u5F39\\u5C42\\u5C06\\u4F1A\\u6E32\\u67D3\\u81F3\\u8BE5 DOM \\u4E2D\\uFF0C\\u81EA\\u5B9A\\u4E49\\u9700\\u8981\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"position: relative\"), \" \\u8FD9\\u4F1A\\u6539\\u53D8\\u6D6E\\u5C42 DOM \\u6811\\u4F4D\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u6539\\u53D8\\u89C6\\u56FE\\u6E32\\u67D3\\u4F4D\\u7F6E\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function():HTMLElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelEllipsis\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542Flabel\\u7684\\u8D85\\u51FA\\u7701\\u7565\\uFF0C\\u9ED8\\u8BA4\\u865A\\u62DF\\u5316\\u72B6\\u6001\\u4E0B\\u5F00\\u542F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\", \"|\", \"true(\\u865A\\u62DF\\u5316)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"leafOnly\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u591A\\u9009\\u6A21\\u5F0F\\u4E0B\\u662F\\u5426\\u5F00\\u542F onChange \\u56DE\\u8C03\\u5165\\u53C2\\u53CA\\u5C55\\u793A\\u6807\\u7B7E\\u53EA\\u6709\\u53F6\\u5B50\\u8282\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"loadData\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F02\\u6B65\\u52A0\\u8F7D\\u6570\\u636E\\uFF0C\\u9700\\u8981\\u8FD4\\u56DE\\u4E00\\u4E2APromise\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(treeNode: TreeNodeData) => Promise\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"loadedKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\uFF08\\u53D7\\u63A7\\uFF09\\u5DF2\\u7ECF\\u52A0\\u8F7D\\u7684\\u8282\\u70B9\\uFF0C\\u914D\\u5408 loadData \\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set< string >\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxTagCount\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u591A\\u663E\\u793A\\u591A\\u5C11\\u4E2A tag\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"motionExpand\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u9009\\u9879\\u6811\\u8282\\u70B9\\u52A8\\u753B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"multiple\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u652F\\u6301\\u591A\\u9009\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"optionListStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"optionList\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"outerBottomSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6E32\\u67D3\\u5728\\u5F39\\u51FA\\u5C42\\u5E95\\u90E8\\uFF0C\\u4E0E optionList \\u5E73\\u7EA7\\u7684\\u81EA\\u5B9A\\u4E49 slot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"outerTopSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6E32\\u67D3\\u5728\\u5F39\\u51FA\\u5C42\\u9876\\u90E8\\uFF0C\\u4E0E optionList \\u5E73\\u7EA7\\u7684\\u81EA\\u5B9A\\u4E49 slot\\uFF0C\\u6CE8\\u610F\\u5982\\u679C\\u5F00\\u542F\\u4E86 filterTreeNode \\u4F1A\\u53D6\\u4EE3\\u641C\\u7D22\\u6846\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 search \\u65B9\\u6CD5\\u6765\\u81EA\\u884C\\u5904\\u7406\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"placeholder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u62E9\\u6846\\u9ED8\\u8BA4\\u6587\\u5B57\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u83DC\\u5355\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\\u503C\\u53C2\\u8003 Tooltip position\\u3002v2.25.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bottomLeft\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prefix\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u524D\\u7F00\\u6807\\u7B7E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preventScroll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u5E94\\u6EDA\\u52A8\\u6587\\u6863\\u4EE5\\u663E\\u793A\\u65B0\\u805A\\u7126\\u7684\\u5143\\u7D20\\uFF0C\\u4F5C\\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u7684 focus \\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderFullLabel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49label\\u7684\\u6E32\\u67D3\\u51FD\\u6570\\uFF0C\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/navigation/tree#%E9%AB%98%E7%BA%A7%E5%AE%9A%E5%88%B6\"\n  }, \"\\u5165\\u53C2\\u53CA\\u7528\\u6CD5\\u8BE6\\u89C1\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(obj) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderLabel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49label\\u7684\\u6E32\\u67D3\\u51FD\\u6570\\uFF0CsearchWord \\u53C2\\u6570\\u81EA 2.65.0 \\u5F00\\u59CB\\u652F\\u6301\\u3002\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/navigation/tree#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8A%82%E7%82%B9%E5%86%85%E5%AE%B9\"\n  }, \"\\u5165\\u53C2\\u53CA\\u7528\\u6CD5\\u8BE6\\u89C1\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(label: ReactNode, data: TreeNodeData, searchWord: string) => ReactNode\",\n    mdxType: \"ApiType\"\n  }, \"(label, data, searchWord) => ReactNode\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderSelectedItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5DF2\\u9009\\u9879\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"restTagsPopoverProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Popover \\u7684\\u914D\\u7F6E\\u5C5E\\u6027\\uFF0C\\u53EF\\u4EE5\\u63A7\\u5236 position\\u3001zIndex\\u3001trigger \\u7B49\\uFF0C\\u5177\\u4F53\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/popover#API%20%E5%8F%82%E8%80%83\"\n  }, \"Popover\"), \" \\u3002v2.22.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"PopoverProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"searchAutoFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u641C\\u7D22\\u6846\\u81EA\\u52A8\\u805A\\u7126\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"searchPlaceholder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u641C\\u7D22\\u6846\\u9ED8\\u8BA4\\u6587\\u5B57\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"searchPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u641C\\u7D22\\u6846\\u7684\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"dropdown\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"trigger\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"dropdown\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u503C\\u4E0D\\u4E3A\\u7A7A\\u65F6\\uFF0Ctrigger \\u662F\\u5426\\u5C55\\u793A\\u6E05\\u9664\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showFilteredOnly\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u641C\\u7D22\\u72B6\\u6001\\u4E0B\\u662F\\u5426\\u53EA\\u5C55\\u793A\\u8FC7\\u6EE4\\u540E\\u7684\\u7ED3\\u679C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showLine\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u9879\\u9762\\u677F\\u4E2D\\u9009\\u9879\\u663E\\u793A\\u8FDE\\u63A5\\u7EBF\\u3002v2.50.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showRestTagsPopover\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u8D85\\u8FC7 maxTagCount\\uFF0Chover \\u5230 +N \\u65F6\\uFF0C\\u662F\\u5426\\u901A\\u8FC7 Popover \\u663E\\u793A\\u5269\\u4F59\\u5185\\u5BB9\\u3002v2.22.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showSearchClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u641C\\u7D22\\u6846\\u7684\\u6E05\\u9664\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u62E9\\u6846\\u5927\\u5C0F\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u62E9\\u6846\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"suffix\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u540E\\u7F00\\u6807\\u7B7E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"treeData\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeNodes\"), \" \\u6570\\u636E\\uFF0C\\u5982\\u679C\\u8BBE\\u7F6E\\u5219\\u4E0D\\u9700\\u8981\\u624B\\u52A8\\u6784\\u9020 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"TreeNode\"), \" \\u8282\\u70B9\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"key\"), \" \\u503C\\u5728\\u6574\\u4E2A\\u6811\\u8303\\u56F4\\u5185\\u552F\\u4E00\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TreeNodeData[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", \"]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"treeNodeFilterProp\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u641C\\u7D22\\u65F6\\u8F93\\u5165\\u9879\\u8FC7\\u6EE4\\u5BF9\\u5E94\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"TreeNodeData\"), \" \\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"label\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"treeNodeLabelProp\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4F5C\\u4E3A\\u663E\\u793A\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"prop\"), \" \\u8BBE\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"label\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"triggerRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u89E6\\u53D1\\u5668\\u6E32\\u67D3\\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: TriggerRenderProps) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validateStatus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6821\\u9A8C\\u7ED3\\u679C\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\uFF08\\u53EA\\u5F71\\u54CD\\u6837\\u5F0F\\u80CC\\u666F\\u8272\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u9009\\u4E2D\\u7684\\u8282\\u70B9\\u7684value\\u503C\\uFF0C\\u4F20\\u5165\\u8BE5\\u503C\\u65F6\\u5C06\\u4F5C\\u4E3A\\u53D7\\u63A7\\u7EC4\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"string \\\\| number \\\\| TreeNodeData \\\\| (string \\\\| number \\\\| TreeNodeData)[]\",\n    mdxType: \"ApiType\"\n  }, \"ValueType\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"virtualize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5217\\u8868\\u865A\\u62DF\\u5316\\uFF0C\\u7528\\u4E8E\\u5927\\u91CF\\u6811\\u8282\\u70B9\\u7684\\u60C5\\u51B5\\uFF0C\\u7531 height, width, itemSize \\u7EC4\\u6210\\uFF0C\\u53C2\\u8003 Tree - Virtualize Object\\u3002\\u5F00\\u542F\\u540E\\u5C06\\u5173\\u95ED\\u52A8\\u753B\\u6548\\u679C\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"treeSelect\\u4E0B\\u62C9\\u83DC\\u5355\\u7684zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1030\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onBlur\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5931\\u53BB\\u7126\\u70B9\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function(event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u4E2D\\u6811\\u8282\\u70B9\\u65F6\\u8C03\\u7528\\u6B64\\u51FD\\u6570\\uFF0C\\u9ED8\\u8BA4\\u8FD4\\u56DE\\u503C\\u4E3A\\u5F53\\u524D\\u6240\\u6709\\u9009\\u4E2D\\u9879\\u7684value\\u503C\\u53CA\\u8282\\u70B9\\u5C5E\\u6027\\uFF1B\\u5982\\u679C\\u662F\\u901A\\u8FC7tag\\u5173\\u95ED\\uFF0Cevent\\u53C2\\u6570\\u4E3Anull\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChangeWithObject\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C06\\u9009\\u4E2D\\u9879 option \\u7684\\u5176\\u4ED6\\u5C5E\\u6027\\u4F5C\\u4E3A\\u56DE\\u8C03\\u3002\\u8BBE\\u4E3A true \\u65F6\\uFF0ConChange \\u7684\\u5165\\u53C2\\u7C7B\\u578BFunction(node\", \"|\", \"node[], e) \\u6B64\\u65F6\\u5982\\u679C\\u662F\\u53D7\\u63A7\\uFF0C\\u4E5F\\u9700\\u8981\\u628A value \\u8BBE\\u7F6E\\u6210 object\\uFF0C\\u4E14\\u5FC5\\u987B\\u542B\\u6709 value \\u7684\\u952E\\u503C\\uFF1BdefaultValue\\u540C\\u7406\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u6E05\\u9664\\u6309\\u94AE\\u65F6\\u89E6\\u53D1\\u7684\\u56DE\\u8C03\\u3002v2.52.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onExpand\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u793A\\u8282\\u70B9\\u65F6\\u8C03\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(expandedKeys:array, {expanded: bool, node}) => void\",\n    mdxType: \"ApiType\"\n  }, \"(expandedKeys, object) => void\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u805A\\u7126\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function(event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onLoad\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8282\\u70B9\\u52A0\\u8F7D\\u5B8C\\u6BD5\\u65F6\\u89E6\\u53D1\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(loadedKeys: Set<string\\\\>, treeNode: TreeNodeData) => void\",\n    mdxType: \"ApiType\"\n  }, \"(loadedKeys, treeNode) => void\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSearch\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6587\\u672C\\u6846\\u503C\\u53D8\\u5316\\u65F6\\u56DE\\u8C03\\u3002 \", mdx(\"br\", null), \"\\u5165\\u53C2 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"filteredExpandedKeys\"), \" \\u8868\\u793A\\u56E0\\u4E3A\\u641C\\u7D22\\u6216 value / defaultValue \\u800C\\u5C55\\u5F00\\u7684\\u8282\\u70B9\\u7684 key, \\u53EF\\u4EE5\\u914D\\u5408 expandedKeys \\u53D7\\u63A7\\u65F6\\u4F7F\\u7528\\u3002\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"filteredExpandedKeys \\u5728 2.6.0 \\u4E2D\\u65B0\\u589E\"), \"\\uFF1B\", mdx(\"br\", null), \"\\u5165\\u53C2 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"filteredNodes\"), \" \\u662F\\u641C\\u7D22\\u547D\\u4E2D\\u7684\\u8282\\u70B9\\u3002\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"filteredNodes \\u5728 2.57.0 \\u4E2D\\u65B0\\u589E\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"function(input: string, filteredExpandedKeys: string[], filteredNodes: TreeNodeData[])\",\n    mdxType: \"ApiType\"\n  }, \"(input, filteredExpandedKeys, filteredNodes)=>void\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSelect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u88AB\\u9009\\u4E2D\\u65F6\\u8C03\\u7528\\uFF0C\\u8FD4\\u56DE\\u503C\\u4E3A\\u5F53\\u524D\\u4E8B\\u4EF6\\u9009\\u9879\\u7684key\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(selectedKey:string, selected: bool, selectedNode: TreeNodeData) => void\",\n    mdxType: \"ApiType\"\n  }, \"(selectedKey, selected, selectedNode)=>void\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onVisibleChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u5C55\\u793A/\\u9690\\u85CF\\u65F6\\u89E6\\u53D1\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function(isVisible:boolean)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"TreeNodeData\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E0D\\u540C \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"TreeNodeData\"), \" \\u7684 key \\u503C\\u8981\\u6C42\\u5FC5\\u586B\\u4E14\\u552F\\u4E00\\u3002\"), mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" \\u5141\\u8BB8\\u91CD\\u590D\\u3002value \\u503C\\u975E\\u5FC5\\u586B\\u3002\\u6B64\\u65F6 onChange, value, defaultValue \\u53CA onChangeWithObject \\u4E2D\\u6240\\u53D6\\u7684 value \\u5C5E\\u6027\\u503C\\u5C06\\u6539\\u4E3A key \\u503C\\u3002\\n\\u4E3A\\u4E86\\u4FDD\\u8BC1\\u884C\\u4E3A\\u7684\\u7B26\\u5408\\u9884\\u671F\\uFF0CtreeData \\u4E2D\\u7684 value \\u503C\\u6216\\u8005\\u5168\\u90E8\\u4E0D\\u586B\\u5199\\uFF0C\\u6216\\u8005\\u5168\\u90E8\\u586B\\u5199\\u4E14\\u552F\\u4E00\\uFF0C\\u4E0D\\u5EFA\\u8BAE\\u6DF7\\u5199\\u3002\")), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u793A\\u7684\\u6587\\u672C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u7528\\uFF0C\\u591A\\u9009\\u72B6\\u6001\\u4E0B\\u652F\\u6301\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"required\\u4E14\\u8981\\u6C42\\u552F\\u4E00\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"isLeaf\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u4E3A\\u53F6\\u5B50\\u8282\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Methods\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7ED1\\u5B9A\\u5728\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u4E0A\\u7684\\u65B9\\u6CD5\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 ref \\u8C03\\u7528\\u5B9E\\u73B0\\u67D0\\u4E9B\\u7279\\u6B8A\\u4EA4\\u4E92\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"search(sugInput: string)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5982\\u679C\\u9700\\u8981\\u5728\\u5916\\u90E8\\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u6846\\uFF0C\\u53EF\\u4EE5\\u5728\\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u6846\\u503C\\u53D8\\u66F4\\u65F6\\u4E3B\\u52A8\\u8C03\\u7528\\u8BE5\\u65B9\\u6CD5\\uFF0C\\u6539\\u53D8\\u7B5B\\u9009\\u7ED3\\u679C\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"TreeSelect \\u4F1A\\u81EA\\u52A8\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u4E3A 'TreeSelect'\\uFF0C\\u4E5F\\u652F\\u6301\\u7528\\u6237\\u81EA\\u884C\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u6765\\u8868\\u793A\\u8BE5 TreeSelect \\u4F5C\\u7528;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"TreeSelect \\u5141\\u8BB8\\u7528\\u6237\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-describedby\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-errormessage\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-invalid\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-required\"), \"\\uFF0C\\u53E6\\u5916\\uFF0CForm \\u4F1A\\u4E3A Form.TreeSelect \\u81EA\\u52A8\\u8BBE\\u7F6E\\u8FD9\\u4E9B\\u5C5E\\u6027;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"TreeSelect \\u4F1A\\u81EA\\u52A8\\u4E3A\\u6BCF\\u4E2A\\u5B50\\u8282\\u70B9\\u5206\\u522B\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-disabled\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-checked\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-selected\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-level\"), \" \\u6765\\u8868\\u660E\\u8282\\u70B9\\u72B6\\u6001\\u53CA\\u5C42\\u7EA7;\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u793A\\u4F8B:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"    <TreeSelect\\n        /* other attributes */\\n        aria-label='example treeSelect'\\n    />\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/input/treeselect","next":{"fields":{"slug":"en-US/input/upload"},"id":"7b7f2df2-5ca9-57ef-ab63-bc419b628466","frontmatter":{"title":"Upload","localeCode":"en-US","icon":"doc-upload","showNew":null}},"previous":{"fields":{"slug":"en-US/input/treeselect"},"id":"b77709f6-2eb0-550e-9967-e5b8ac68abac","frontmatter":{"title":"TreeSelect","localeCode":"en-US","icon":"doc-treeselect","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}