{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/navigation/tree","result":{"data":{"current":{"frontmatter":{"title":"Tree 树形控件","order":61,"brief":"树型结构列表。","icon":"doc-tree"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#多选","title":"多选"},{"url":"#可搜索的","title":"可搜索的"},{"url":"#手动触发搜索","title":"手动触发搜索"},{"url":"#简单-json-格式的数据","title":"简单 JSON 格式的数据"},{"url":"#行显示节点","title":"行显示节点"},{"url":"#自定义节点内容","title":"自定义节点内容"},{"url":"#自定义图标","title":"自定义图标"},{"url":"#目录树模式","title":"目录树模式"},{"url":"#禁用","title":"禁用"},{"url":"#节点选中关系","title":"节点选中关系"},{"url":"#默认展开","title":"默认展开"},{"url":"#开启搜索的展开受控","title":"开启搜索的展开受控"},{"url":"#受控","title":"受控"},{"url":"#自动展开父节点","title":"自动展开父节点"},{"url":"#自定义展开-icon","title":"自定义展开 Icon"},{"url":"#连接线","title":"连接线"},{"url":"#虚拟化","title":"虚拟化"},{"url":"#动态更新数据","title":"动态更新数据"},{"url":"#异步加载数据","title":"异步加载数据"},{"url":"#可拖拽的tree","title":"可拖拽的Tree"},{"url":"#高级定制","title":"高级定制"},{"url":"#可拖拽的高级定制","title":"可拖拽的高级定制"}]},{"url":"#api参考","title":"API参考","items":[{"url":"#tree","title":"Tree"},{"url":"#treenodedata","title":"TreeNodeData"},{"url":"#virtualize-object","title":"Virtualize Object"}]},{"url":"#methods","title":"Methods"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#文案规范","title":"文案规范"},{"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\": 61,\n  \"category\": \"导航类\",\n  \"title\": \"Tree 树形控件\",\n  \"icon\": \"doc-tree\",\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 Notice = makeShortcode(\"Notice\");\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 { Tree } 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 { Tree } 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    const style = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeData}\\n            defaultExpandAll\\n            style={style}\\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(\"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 { Tree } 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                            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    const style = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeData}\\n            multiple\\n            defaultExpandAll\\n            style={style}\\n        />\\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\\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(\"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 { Tree, Switch } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            showFilteredOnly: false,\\n        };\\n        this.onChange = this.onChange.bind(this);\\n    }\\n    onChange(showFilteredOnly) {\\n        this.setState({ showFilteredOnly });\\n    }\\n    render() {\\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        const style = {\\n            width: 260,\\n            height: 420,\\n            border: '1px solid var(--semi-color-border)'\\n        };\\n        const { showFilteredOnly } = this.state;\\n        return (\\n            <>\\n                <span>showFilteredOnly</span>\\n                <Switch\\n                    checked={showFilteredOnly}\\n                    onChange={this.onChange}\\n                    size=\\\"small\\\"\\n                />\\n                <br />\\n                <Tree\\n                    treeData={treeData}\\n                    multiple\\n                    filterTreeNode\\n                    showFilteredOnly={showFilteredOnly}\\n                    style={style}\\n                />\\n            </>\\n        );\\n    }\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterTreeNode\"), \" \\u5C5E\\u6027\\u5F00\\u542F\\u641C\\u7D22\\u540E\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"searchRender\"), \" \\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u6846\\u7684\\u6E32\\u67D3\\u65B9\\u6CD5\\uFF0C\\u8BBE\\u7F6E\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \"\\u65F6\\u53EF\\u4EE5\\u9690\\u85CF\\u641C\\u7D22\\u6846\\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 { Tree, Input } 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\\n    return (\\n        <Tree\\n            filterTreeNode\\n            searchRender={({ prefix, ...restProps }) => (\\n                <Input\\n                    prefix='Search'\\n                    {...restProps}\\n                />\\n            )}\\n            treeData={treeData}\\n        />\\n    );\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u624B\\u52A8\\u89E6\\u53D1\\u641C\\u7D22\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7ref\\u7684\\u65B9\\u5F0F\\u83B7\\u53D6tree\\u7684\\u5B9E\\u4F8B\\uFF0C\\u8C03\\u7528tree\\u7684\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"search\"), \"\\u65B9\\u6CD5\\u8FDB\\u884C\\u641C\\u7D22\\u3002\\u6CE8\\u610F\\u9700\\u8981\\u540C\\u65F6\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterTreeNode\"), \"\\u5F00\\u542F\\u641C\\u7D22\\uFF0C\\u5982\\u679C\\u641C\\u7D22\\u6846\\u5728tree\\u5916\\u90E8\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"searchRender=false\"), \"\\u9690\\u85CFtree\\u5185\\u90E8\\u7684\\u641C\\u7D22\\u6846\\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 { Tree, Input } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const ref = useRef();\\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        <div>\\n            <Input aria-label='filter tree' prefix=\\\"Search\\\" showClear onChange={v => ref.current.search(v)} />\\n            <div style={{ marginTop: 20 }}>\\u641C\\u7D22\\u7ED3\\u679C\\u5982\\u4E0B\\uFF1A</div>\\n            <Tree\\n                ref={ref}\\n                filterTreeNode\\n                searchRender={false}\\n                treeData={treeData}\\n                blockNode={false}\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7B80\\u5355 JSON \\u683C\\u5F0F\\u7684\\u6570\\u636E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeDataSimpleJson\"), \" \\u4F20\\u5165 JSON \\u5F62\\u5F0F\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeNodes\"), \" \\u6570\\u636E\\u3002\\u6B64\\u65F6 key-value \\u952E\\u503C\\u5BF9\\u4E2D\\u7684 key \\u503C\\u5C06\\u4F5C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeNodeData\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"key\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"value\"), \" \\u503C\\u5C06\\u4F5C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeNodeData\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"value\"), \"\\u3002\\u8FD4\\u56DE\\u503C\\u4E3A\\u5305\\u542B\\u9009\\u4E2D\\u8282\\u70B9\\u7684 JSON \\u6570\\u636E\\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 from 'react';\\nimport { Tree } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const json = {\\n        \\\"Node1\\\": {\\n            \\\"Child Node1\\\": '0-0-1',\\n            \\\"Child Node2\\\": '0-0-2',\\n        },\\n        \\\"Node2\\\": \\\"0-1\\\"\\n    };\\n    const style = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeDataSimpleJson={json}\\n            multiple\\n            onChange={e => console.log('\\u5F53\\u524D\\u6240\\u6709\\u9009\\u4E2D\\u9879: ', e)}\\n            onSelect={e => console.log('\\u5F53\\u524D\\u9009\\u9879: ', e)}\\n            style={style}\\n        />\\n\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u884C\\u663E\\u793A\\u8282\\u70B9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"blockNode\"), \" \\u4F7F\\u8282\\u70B9\\u663E\\u793A\\u4E3A\\u6574\\u884C\\uFF0C\\u6B64\\u65F6\\u60AC\\u6D6E\\u9009\\u4E2D\\u9AD8\\u4EAE\\u72B6\\u6001\\u90FD\\u4F1A\\u663E\\u793A\\u6574\\u884C\\u3002\\u9ED8\\u8BA4\\u6253\\u5F00\\u3002\\n\\u5173\\u95ED\\u65F6\\u53EA\\u9AD8\\u4EAE\\u8282\\u70B9 label\\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 { Tree } 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        <div>\\n            <Tree\\n                treeData={treeData}\\n                defaultValue='Shanghai'\\n                blockNode={false}\\n            />\\n            <br />\\n            <Tree\\n                treeData={treeData}\\n                defaultValue='Shanghai'\\n                multiple\\n                blockNode={false}\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u8282\\u70B9\\u5185\\u5BB9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeNodeData\"), \" \\u7684 label \\u5C5E\\u6027\\u652F\\u6301\\u4F20\\u5165 ReactNode \\u6765\\u81EA\\u5B9A\\u4E49\\u663E\\u793A\\u7684\\u8282\\u70B9\\u5185\\u5BB9\\u3002\\u6CE8\\u610F\\u5982\\u679C\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterTreeNode\"), \" \\u5F00\\u542F\\u641C\\u7D22\\uFF0C\\u9ED8\\u8BA4\\u662F\\u5BF9 label \\u7684\\u503C\\u8FDB\\u884C\\u641C\\u7D22\\uFF0C\\u5F53 label \\u4E3A\\u8282\\u70B9\\u65F6\\uFF0C\\u9700\\u8981\\u81EA\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterTreeNode\"), \" \\u7684\\u51FD\\u6570\\u6765\\u6EE1\\u8DB3\\u641C\\u7D22\\u9700\\u6C42\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"v>=1.6.0\"), \"\\u7684\\u7248\\u672C\\u4E2D\\uFF0C\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderLabel\"), \" \\u6765\\u4F20\\u5165\\u81EA\\u5B9A\\u4E49\\u7684\\u6E32\\u67D3\\u65B9\\u6CD5\\uFF0C\\u6B64\\u65F6\\u641C\\u7D22\\u503C\\u4ECD\\u4E3AtreeData\\u4E2D\\u7684\\u76F8\\u5E94\\u7684label\\u5C5E\\u6027\\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 { Tree, ButtonGroup, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const opts = {\\n        content: 'Hi, Bytedance dance dance',\\n        duration: 3,\\n    };\\n\\n    const button = (\\n        <ButtonGroup\\n            size=\\\"small\\\"\\n            theme=\\\"borderless\\\"\\n        >\\n            <Button\\n                onClick={e => {\\n                    Toast.info(opts);\\n                    e.stopPropagation();\\n                }}\\n            >\\u63D0\\u793A</Button>\\n            <Button>\\u70B9\\u51FB</Button>\\n        </ButtonGroup>\\n    );\\n\\n    const style = {\\n        display: 'flex',\\n        justifyContent: 'space-between',\\n        alignItems: 'center'\\n    };\\n\\n    const treeDataWithNode = [\\n        {\\n            label: (\\n                <div style={style}>\\n                    <span>\\u4E9A\\u6D32</span>\\n                    {button}\\n                </div>\\n            ),\\n            value: 'yazhou',\\n            key: 'yazhou',\\n            children: [\\n                {\\n                    label: (\\n                        <div style={style}>\\n                            <span>\\u4E2D\\u56FD</span>\\n                            {button}\\n                        </div>\\n                    ),\\n                    value: 'zhongguo',\\n                    key: 'zhongguo'\\n                },\\n                {\\n                    label: (\\n                        <div style={style}>\\n                            <span>\\u65E5\\u672C</span>\\n                            {button}\\n                        </div>\\n                    ),\\n                    value: 'riben',\\n                    key: 'riben',\\n                },\\n            ],\\n        }\\n    ];\\n    const treeStyle = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeDataWithNode}\\n            style={treeStyle}\\n        />\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8FC7\\u957F\\u7701\\u7565\\u3002\\u5728\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"v>=1.6.0\"), \"\\u7684\\u7248\\u672C\\u4E2D\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderLabel\"), \" \\u6765\\u5B9E\\u73B0\\u6587\\u672C\\u8FC7\\u957F\\u7701\\u7565\\u7684\\u6548\\u679C\\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 { Tree, Button, Typography } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const renderBtn = (content) => (\\n        <Button\\n            onClick={e => {\\n                Toast.info({ content });\\n                e.stopPropagation();\\n            }}\\n            icon={<IconMore />}\\n            size=\\\"small\\\"\\n        />\\n    );\\n    const renderLabel = (label, item) => (\\n        <div style={{ display: 'flex' }}>\\n            <Typography.Text\\n                ellipsis={{ showTooltip: true }}\\n                style={{ width: 'calc(100% - 48px)' }}\\n            >\\n                {label}\\n            </Typography.Text>\\n            {renderBtn(item.key)}\\n        </div>\\n    );\\n    const treeDataWithNode = [\\n        {\\n            label: '\\u4E9A\\u6D32\\u4E9A\\u6D32\\u4E9A\\u6D32\\u4E9A\\u6D32\\u4E9A\\u6D32\\u4E9A\\u6D32\\u4E9A\\u6D32\\u4E9A\\u6D32',\\n            value: 'yazhou',\\n            key: 'yazhou',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD\\u4E2D\\u56FD\\u4E2D\\u56FD\\u4E2D\\u56FD\\u4E2D\\u56FD\\u4E2D\\u56FD\\u4E2D\\u56FD\\u4E2D\\u56FD',\\n                    value: 'zhongguo',\\n                    key: 'zhongguo'\\n                },\\n                {\\n                    label: '\\u65E5\\u672C\\u65E5\\u672C\\u65E5\\u672C\\u65E5\\u672C\\u65E5\\u672C\\u65E5\\u672C\\u65E5\\u672C\\u65E5\\u672C',\\n                    value: 'riben',\\n                    key: 'riben',\\n                },\\n            ],\\n        }\\n    ];\\n    const treeStyle = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeDataWithNode}\\n            renderLabel={renderLabel}\\n            style={treeStyle}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"icon\"), \" \\u5C5E\\u6027\\u53EF\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\\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 { Tree } from '@douyinfe/semi-ui';\\nimport { IconMapPin } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const treeData = [\\n        {\\n            label: 'Asia',\\n            value: 'Asia',\\n            key: '0',\\n            icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }} />),\\n            children: [\\n                {\\n                    label: 'China',\\n                    value: 'China',\\n                    key: '0-0',\\n                    icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }} />)\\n                },\\n                {\\n                    label: 'Japan',\\n                    value: 'Japan',\\n                    key: '0-1',\\n                    icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }} />)\\n                },\\n            ],\\n        }\\n    ];\\n    const style = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeData}\\n            style={style}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u76EE\\u5F55\\u6811\\u6A21\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"directory\"), \" \\u5C5E\\u6027\\u53EF\\u663E\\u793A\\u4E3A\\u76EE\\u5F55\\u6811\\u6A21\\u5F0F\\u3002\\u76EE\\u5F55\\u6811\\u6A21\\u5F0F\\u4E0B\\u81EA\\u5E26\\u76EE\\u5F55\\u56FE\\u6807\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807\\u8986\\u76D6\\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 { Tree } 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    const style = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeData}\\n            directory\\n            style={style}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\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(\"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 { Tree } 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                            disabled: true,\\n                        },\\n                        {\\n                            label: 'Shanghai',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                            disabled: true,\\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    const style = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeData}\\n            defaultValue='Shanghai'\\n            multiple\\n            disableStrictly\\n            style={style}\\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\\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'\\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 { Tree } 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                            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    const style = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeData}\\n            multiple\\n            checkRelation='unRelated'\\n            defaultExpandAll\\n            style={style}\\n        />\\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  }, \"Tree\"), \" \\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\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeDataSimpleJson\"), \")\\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  }, \"\\u5176\\u4E2D\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandAll\"), \" \\u662F\\u4ECE 1.30.0 \\u5F00\\u59CB\\u652F\\u6301\\u7684\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u4E0B\\u9762\\u7684 demo \\u4E2D\\uFF0C\\u70B9\\u51FB\\u6309\\u94AE\\u66F4\\u65B0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeData\"), \" \\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 dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { Tree, Button } from '@douyinfe/semi-ui';\\n() => {\\n    const json = {\\n        \\\"Node1\\\": { \\n            \\\"Child Node1\\\": '0-0-1',\\n            \\\"Child Node2\\\": '0-0-2',\\n        },\\n        \\\"Node2\\\": \\\"0-1\\\"\\n    };\\n    const json2 = {\\n        \\\"Node3\\\": {\\n            \\\"Child Node1\\\": '0-0-1',\\n            \\\"Child Node2\\\": '0-0-2',\\n            \\\"Child Node3\\\": '0-0-3',\\n            \\\"Child Node4\\\": '0-0-4',\\n        },\\n        \\\"Node2\\\": \\\"0-1\\\",\\n    };\\n    const style = {\\n        marginRight: 20,\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)',\\n    };\\n    const [tree, setTree] = useState(json);\\n    const handleClick = () => {\\n        setTree(json2);\\n    };\\n    return (\\n        <>\\n            <Button onClick={handleClick} style={{ marginBottom: 10 }}>\\n                \\u70B9\\u51FB\\u66F4\\u65B0 TreeData\\n            </Button>\\n            <div style={{ display: 'flex' }}>\\n                <div>\\n                    <span>defaultExpandAll</span>\\n                    <Tree\\n                        defaultExpandAll\\n                        treeDataSimpleJson={tree}\\n                        style={style}\\n                    />\\n                </div>\\n                <div>\\n                    <span>expandAll</span>\\n                    <Tree\\n                        expandAll\\n                        treeDataSimpleJson={tree}\\n                        style={style}\\n                    />\\n                </div>\\n            </div>\\n        </>\\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\\u4F60\\u53EF\\u4EE5\\u5229\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onSearch\"), \" \\u7684\\u5165\\u53C2 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredExpandedKeys\"), \"\\uFF08version: >= 2.38.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 { Tree } 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        <Tree\\n            style={{ width: 300 }}\\n            treeData={treeData}\\n            filterTreeNode\\n            expandedKeys={expandedKeys}\\n            onExpand={expandedKeys => {\\n                setExpandedKeys(expandedKeys);\\n            }}\\n            onSearch={(inputValue, filteredExpandedKeys) => {\\n                setExpandedKeys([...filteredExpandedKeys]);\\n            }}\\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\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Tree } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            value: 'Shanghai'\\n        };\\n    }\\n    onChange(value) {\\n        this.setState({ value });\\n    }\\n    render() {\\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        const style = {\\n            width: 260,\\n            height: 420,\\n            border: '1px solid var(--semi-color-border)'\\n        };\\n        return (\\n            <Tree\\n                treeData={treeData}\\n                value={this.state.value}\\n                onChange={value => this.onChange(value)}\\n                style={style}\\n            />\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u52A8\\u5C55\\u5F00\\u7236\\u8282\\u70B9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u5C55\\u5F00\\u53D7\\u63A7\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5F53\\u5F00\\u542F\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"autoExpandParent\"), \" \\uFF0C\\u5982\\u679C\\u60F3\\u8981\\u6536\\u8D77\\u7236\\u5143\\u7D20\\uFF0C\\u5219\\u9700\\u8981\\u628A\\u5B83\\u7684\\u6240\\u6709\\u5B50\\u5143\\u7D20\\u5747\\u6536\\u8D77\\u540E\\u624D\\u53EF\\u4EE5\\u3002\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"autoExpandParent\"), \" \\u4E3A false\\uFF0C\\u5373\\uFF1A\\u7236\\u5143\\u7D20\\u6536\\u8D77\\u4E0D\\u53D7\\u5230\\u5B50\\u5143\\u7D20\\u7684\\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 { Tree } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            expandedKeys: ['0', '0-0']\\n        };\\n    }\\n    onExpand(value) {\\n        this.setState({ expandedKeys: value });\\n    }\\n    render() {\\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        const style = {\\n            width: 260,\\n            height: 420,\\n            border: '1px solid var(--semi-color-border)'\\n        };\\n        return (\\n            <>\\n                <div>\\n                    \\u9700\\u8981\\u5148\\u5C06\\u201C\\u4E2D\\u56FD\\u201D\\u8282\\u70B9\\u6536\\u8D77\\u540E\\uFF0C\\u624D\\u80FD\\u591F\\u6536\\u8D77\\u201C\\u4E9A\\u6D32\\u201D\\u8282\\u70B9\\n                </div>\\n                <br />\\n                <Tree\\n                    autoExpandParent\\n                    treeData={treeData}\\n                    onExpand={v=>this.onExpand(v)}\\n                    expandedKeys={this.state.expandedKeys}\\n                    style={style}\\n                />\\n            </>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5C55\\u5F00 Icon\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandIcon\"), \" \\u81EA\\u5B9A\\u4E49\\u5C55\\u5F00 Icon\\u3002 \\u652F\\u6301\\u4F20\\u5165 ReactNode \\u6216\\u8005\\u51FD\\u6570\\u3002\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandIcon\"), \" \\u81EA 2.75.0 \\u5F00\\u59CB\\u652F\\u6301\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"expandIcon: ReactNode | ((props: {\\n    onClick: (e: MouseEvent) => void;\\n    className: string;\\n    expanded: boolean;\\n}))\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u793A\\u4F8B\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"() => {\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            key: 'yazhou',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    key: 'zhongguo',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            key: 'beijing',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            key: 'shanghai',\\n                        },\\n                    ],\\n                },\\n                {\\n                    label: '\\u65E5\\u672C',\\n                    key: 'riben',\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            key: 'beimeizhou',\\n        },\\n    ];\\n    const expandIconFunc = useCallback((props) => {\\n        const { expanded, onClick, className } = props;\\n        if (expanded) {\\n        return <IconMinus size=\\\"small\\\" className={className} onClick={onClick}/>\\n        } else {\\n        return <IconPlus size=\\\"small\\\" className={className} onClick={onClick}/>\\n        }\\n    });\\n    const style = {\\n        width: 260,\\n        height: 200,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n\\n  return (\\n    <>\\n      <p>expandIcon \\u662F  ReactNode</p>\\n      <Tree\\n        style={{ width: 300}}\\n        expandIcon={<IconChevronDown size=\\\"small\\\" className='testCls'/>}\\n        multiple\\n        defaultExpandedKeys={['yazhou']}\\n        treeData={treeData}\\n        style={style}\\n      />\\n      <br />\\n      <p>expandIcon \\u662F\\u51FD\\u6570 </p>\\n      <Tree\\n        style={{ width: 300}}\\n        multiple\\n        expandIcon={expandIconFunc}\\n        defaultExpandedKeys={['yazhou']}\\n        treeData={treeData}\\n        style={style}\\n      />\\n    </>\\n  );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8FDE\\u63A5\\u7EBF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showLine\"), \" \\u8BBE\\u7F6E\\u8282\\u70B9\\u4E4B\\u95F4\\u7684\\u8FDE\\u63A5\\u7EBF\\uFF0C\\u9ED8\\u8BA4\\u4E3A false\\uFF0C\\u4ECE 2.50.0 \\u5F00\\u59CB\\u652F\\u6301\"), 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, useCallback } from 'react';\\nimport { Tree, Switch } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [show, setShow] = useState(true);\\n    const onChange = useCallback((value) => {\\n        setShow(value);\\n    }, []);\\n    const treeData = useMemo(() => {\\n        return [\\n            {\\n                label: 'parent-0',\\n                key: 'parent-0',\\n                children: [\\n                    {\\n                        label: 'leaf-0-0',\\n                        key: 'leaf-0-0',\\n                        children: [\\n                            {\\n                                label: 'leaf-0-0-0',\\n                                key: 'leaf-0-0-0',\\n                            },\\n                            {\\n                                label: 'leaf-0-0-1',\\n                                key: 'leaf-0-0-1',\\n                            },\\n                            {\\n                                label: 'leaf-0-0-2',\\n                                key: 'leaf-0-0-2',\\n                            },\\n                        ]\\n                    },\\n                    {\\n                        label: 'leaf-0-1',\\n                        key: 'leaf-0-1',\\n                    }\\n                ]\\n            },\\n            {\\n                label: 'parent-1',\\n                key: 'parent-1',\\n            }\\n        ];\\n    }, []);\\n\\n    const style = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n\\n    return (\\n        <>\\n            <div style={{ display: 'flex', alignItems: 'center', columnGap: 5, marginBottom: 5 }}>\\n                <strong>showLine </strong>\\n                <Switch checked={show} onChange={onChange} />\\n            </div>\\n            <Tree\\n                showLine={show}\\n                defaultExpandAll\\n                treeData={treeData}\\n                style={style}\\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\"), 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 from 'react';\\nimport { Tree, Button } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            gData: [],\\n            total: 0,\\n        };\\n        this.onGen = this.onGen.bind(this);\\n    }\\n\\n    generateData(x = 5, y = 4, z = 3, gData = []) {\\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 || gData;\\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, total: calcTotal(x, y, z) };\\n    }\\n\\n\\n    onGen() {\\n        const { gData, total } = this.generateData();\\n        this.setState({\\n            gData,\\n            total\\n        });\\n    };\\n\\n    render() {\\n        const style = {\\n            width: 260,\\n            border: '1px solid var(--semi-color-border)'\\n        };\\n        return (\\n            <div style={{ padding: '0 20px' }}>\\n                <Button onClick={this.onGen}>\\u751F\\u6210\\u6570\\u636E: </Button>\\n                <span>\\u5171 {this.state.total} \\u4E2A\\u8282\\u70B9</span>\\n                <br />\\n                <br />\\n                {this.state.gData.length ? (\\n                    <Tree\\n                        treeData={this.state.gData}\\n                        filterTreeNode\\n                        showFilteredOnly\\n                        style={style}\\n                        virtualize={{\\n                            // if set height for tree, it will fill 100%\\n                            height: 300,\\n                            itemSize: 28,\\n                        }}\\n                    />\\n                ) : null}\\n            </div>\\n        );\\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 from 'react';\\nimport { Tree, Button } from '@douyinfe/semi-ui';\\n\\nclass Demo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            treeData: [{\\n                key: '0',\\n                label: 'item-0',\\n                value: '0'\\n            }],\\n        };\\n        this.add = this.add.bind(this);\\n    }\\n    add() {\\n        const itemLength = Math.floor(Math.random() * 5) + 1;\\n        const treeData = 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        this.setState({ treeData });\\n    }\\n    render() {\\n        const { treeData } = this.state;\\n        const style = {\\n            width: 260,\\n            height: 420,\\n            border: '1px solid var(--semi-color-border)'\\n        };\\n        return (\\n            <div style={style}>\\n                <Tree\\n                    treeData={treeData}\\n                />\\n                <br />\\n                <Button onClick={this.add} style={{ margin: 20 }}>\\n                    \\u52A8\\u6001\\u6539\\u53D8\\u6570\\u636E\\n                </Button>\\n            </div>\\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 loadData \\u53EF\\u4EE5\\u52A8\\u6001\\u52A0\\u8F7D\\u6570\\u636E\\uFF0C\\u6B64\\u65F6\\u9700\\u8981\\u5728\\u6570\\u636E\\u4E2D\\u4F20\\u5165 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 { Tree } 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        <Tree\\n            loadData={onLoadData}\\n            treeData={[...treeData]}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u62D6\\u62FD\\u7684Tree\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E draggable \\u914D\\u5408 onDrop \\u53EF\\u4EE5\\u5B9E\\u73B0 Tree \\u8282\\u70B9\\u7684\\u62D6\\u62FD\\u3002\"), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\",\n    mdxType: \"Notice\"\n  }, \"\\u62D6\\u62FD\\u529F\\u80FD\\u4E8E v 1.8.0 \\u540E\\u5F00\\u59CB\\u63D0\\u4F9B\\u3002\\u76EE\\u524D\\u4E0D\\u652F\\u6301\\u4E0E\\u865A\\u62DF\\u5316\\u540C\\u65F6\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u62D6\\u62FD\\u4E8B\\u4EF6\\u7684\\u56DE\\u8C03\\u5165\\u53C2\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"- onDragEnd: function({ event, node: DragTreeNode })\\n- onDragEnter:function({ event, node: DragTreeNode, expandedKeys: string[] })\\n- onDragLeave:function({ event, node: DragTreeNode })\\n- onDragOver:function({ event, node: DragTreeNode })\\n- onDragStart: function({ event, node: DragTreeNode })\\n- onDrop:function({ event, node: DragTreeNode, dragNode: DragTreeNode, dragNodesKeys: string[], dropPosition: number, dropToGap: Boolean })\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6570\\u636E\\u7C7B\\u578B DragTreeNode\\uFF0C\\u9664\\u4E86\\u5305\\u542B TreeNodeData \\u6240\\u6709\\u5C5E\\u6027\\u5916\\uFF0C\\u8FD8\\u5305\\u542B expanded \\u548C pos \\u5C5E\\u6027\\uFF0C\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"DragTreeNode {\\n    expanded: Boolean,\\n    pos: string\\n    value?: string | number;\\n    label?: React.ReactNode;\\n    disabled?: boolean;\\n    isLeaf?: boolean;\\n    [key: string]: any;\\n}\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"pos\"), \" \\u6307\\u7684\\u662F\\u5F53\\u524D\\u8282\\u70B9\\u5728\\u6574\\u4E2A treeData \\u4E2D\\u7684\\u4F4D\\u7F6E\\u5173\\u7CFB\\uFF0C\\u5982\\u7B2C0\\u5C42\\u7B2C1\\u4E2A\\u8282\\u70B9\\u7684\\u7B2C2\\u4E2A\\u8282\\u70B9\\u7684\\u7B2C0\\u4E2A\\u8282\\u70B9\\uFF1A'0-1-2-0'\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dropPosition\"), \" \\u6307\\u7684\\u662F\\u88AB\\u62D6\\u62FD\\u8282\\u70B9\\u5728\\u5F53\\u524D\\u5C42\\u7EA7\\u4E2D\\u88AB drop \\u7684\\u4F4D\\u7F6E\\uFF0C\\u5982\\u63D2\\u5165\\u5728\\u540C\\u7EA7\\u7684\\u7B2C0\\u4E2A\\u8282\\u70B9\\u524D\\u5219\\u4E3A -1\\uFF0C\\u5728\\u7B2C0\\u4E2A\\u8282\\u70B9\\u540E\\u5219\\u4E3A 1\\uFF0C\\u843D\\u5728\\u5176\\u4E0A\\u5219\\u4E3A 0\\uFF0C\\u4EE5\\u6B64\\u7C7B\\u63A8\\u3002\\u914D\\u5408 dropToGap \\u53EF\\u4EE5\\u5F97\\u5230\\u66F4\\u5B8C\\u6574\\u7684\\u5224\\u65AD\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dropToGap\"), \" \\u6307\\u7684\\u662F\\u88AB\\u62D6\\u62FD\\u8282\\u70B9\\u662F\\u5426\\u88AB drop \\u5728\\u8282\\u70B9\\u4E4B\\u95F4\\u7684\\u4F4D\\u7F6E\\uFF0C\\u5982\\u679C\\u4E3A false \\u5219\\u662F drop \\u5728\\u67D0\\u4E2A\\u8282\\u70B9\\u4E0A\\u65B9\")), 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 { Tree } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const initialData = [\\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            label: 'Europe',\\n            value: 'Europe',\\n            key: '2',\\n        }\\n    ];\\n    const [treeData, setTreeData] = useState(initialData);\\n\\n    function onDrop(info) {\\n        const { dropToGap, node, dragNode } = info;\\n        const dropKey = node.key;\\n        const dragKey = dragNode.key;\\n        const dropPos = node.pos.split('-');\\n        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\\n\\n        const data = [...treeData];\\n        const loop = (data, key, callback) => {\\n            data.forEach((item, ind, arr) => {\\n                if (item.key === key) return callback(item, ind, arr);\\n                if (item.children) return loop(item.children, key, callback);\\n            });\\n        };\\n        let dragObj;\\n        loop(data, dragKey, (item, ind, arr) => {\\n            arr.splice(ind, 1);\\n            dragObj = item;\\n        });\\n\\n        if (!dropToGap) {\\n            // inset into the dropPosition\\n            loop(data, dropKey, (item, ind, arr) => {\\n                item.children = item.children || [];\\n                item.children.push(dragObj);\\n            });\\n        } else if (dropPosition === 1 && node.children && node.expanded) {\\n            // has children && expanded and drop into the node bottom gap\\n            // insert to the top \\n            loop(data, dropKey, item => {\\n                item.children = item.children || [];\\n                item.children.unshift(dragObj);\\n            });\\n        } else {\\n            let dropNodeInd;\\n            let dropNodePosArr;\\n            loop(data, dropKey, (item, ind, arr) => {\\n                dropNodePosArr = arr;\\n                dropNodeInd = ind;\\n            });\\n            if (dropPosition === -1) {\\n                // insert to top\\n                dropNodePosArr.splice(dropNodeInd, 0, dragObj);\\n            } else {\\n                // insert to bottom\\n                dropNodePosArr.splice(dropNodeInd + 1, 0, dragObj);\\n            }\\n        }\\n        setTreeData(data);\\n    }\\n\\n    return <Tree\\n        treeData={treeData}\\n        draggable\\n        onDrop={onDrop}\\n    />;\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9AD8\\u7EA7\\u5B9A\\u5236\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7248\\u672C v>=1.7.0\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Tree \\u7EC4\\u4EF6\\u7684 api \\u652F\\u6301\\u4E86\\u5927\\u90E8\\u5206\\u7684\\u6E32\\u67D3\\u9700\\u6C42\\uFF0C\\u4F46\\u662F\\u5982\\u679C\\u6709\\u975E\\u5E38\\u7279\\u6B8A\\u7684\\u5B9A\\u5236\\u8981\\u6C42\\u7684\\u8BDD\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFullLabel\"), \" \\u6765\\u63A5\\u7BA1\\u6574\\u884C option \\u7684\\u6E32\\u67D3\\u6548\\u679C\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"renderFullLabel \\u53C2\\u6570\\u7C7B\\u578B\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"type RenderFullLabelProps = {\\n    /* \\u8282\\u70B9\\u6570\\u636E */\\n    data: BasicTreeNodeData;\\n    /* \\u5C42\\u7EA7 */\\n    level: number;\\n    /* \\u865A\\u62DF\\u5316\\u60C5\\u51B5\\u4E0B\\uFF0C\\u8BE5 style \\u5FC5\\u987B\\u7ED9\\u5230 DOM \\u8282\\u70B9\\u4E0A*/\\n    style: any;\\n     /* \\u6837\\u5F0F\\u7C7B\\u540D\\uFF0C\\u5305\\u62EC\\u5185\\u7F6E\\u6837\\u5F0F\\uFF0C\\u5982\\u7F29\\u8FDB\\u3001\\u5C55\\u5F00\\u6309\\u94AE\\u3001\\u8FC7\\u6EE4\\u5668\\u3001\\u7981\\u7528\\u3001\\u9009\\u62E9\\u7B49\\u3002 */\\n    className: string;\\n    /* \\u5C55\\u5F00\\u6309\\u94AE */\\n    expandIcon: any;\\n    /* \\u9009\\u4E2D\\u72B6\\u6001 */\\n    checkStatus: {\\n        /* \\u662F\\u5426\\u9009\\u4E2D */\\n        checked: boolean;\\n        /* \\u662F\\u5426\\u534A\\u9009 */\\n        halfChecked: boolean\\n    };\\n    /* \\u5C55\\u5F00\\u72B6\\u6001 */\\n    expandStatus: {\\n        /* \\u662F\\u5426\\u5C55\\u5F00 */\\n        expanded: boolean;\\n        /* \\u662F\\u5426\\u52A0\\u8F7D\\u4E2D */\\n        loading: boolean\\n    };\\n    /* \\u8BE5\\u8282\\u70B9\\u662F\\u5426\\u7B26\\u5408\\u7B5B\\u9009\\u6761\\u4EF6 */\\n    filtered: boolean | undefined;\\n    /* \\u5F53\\u524D\\u641C\\u7D22\\u6846\\u8F93\\u5165\\u503C */\\n    searchWord: string | undefined;\\n    /* \\u70B9\\u51FB\\u56DE\\u8C03 */\\n    onClick: (e: MouseEvent) => void;\\n    /* \\u591A\\u9009\\u70B9\\u51FB\\u56DE\\u8C03 */\\n    onCheck: (e: MouseEvent) => void;\\n    /* \\u53F3\\u952E\\u70B9\\u51FB\\u56DE\\u8C03 */\\n    onContextMenu: (e: MouseEvent) => void; \\n    /* \\u4E8C\\u6B21\\u70B9\\u51FB\\u56DE\\u8C03 */\\n    onDoubleClick: (e: MouseEvent) => void;\\n    /* \\u5C55\\u5F00\\u56DE\\u8C03 */\\n    onExpand: (e: MouseEvent) => void;\\n}\\n\")), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"\\u5982\\u679C\\u5F00\\u542F\\u4E86\\u865A\\u62DF\\u5316\\uFF0C\\u9700\\u8981\\u5C06 style \\uFF08\\u865A\\u62DF\\u5316\\u76F8\\u5173\\u6837\\u5F0F\\uFF09\\u8D4B\\u4E88\\u7ED9\\u6E32\\u67D3\\u7684 DOM \\u8282\\u70B9\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8FD9\\u91CC\\u7ED9\\u51E0\\u4E2A\\u5E38\\u89C1\\u7684\\u9AD8\\u7EA7\\u7528\\u6CD5\\u7684 demo\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7B2C\\u4E00\\u4E2A\\u662F\\u9488\\u5BF9 \\u201C\\u5E0C\\u671B\\u53EA\\u6709\\u53F6\\u5B50\\u8282\\u70B9\\u53EF\\u4EE5\\u9009\\u4E2D\\uFF0C\\u7236\\u8282\\u70B9\\u53EA\\u8D77\\u5230\\u5206\\u7EC4\\u4F5C\\u7528\\u201D \\u7684\\u573A\\u666F\\u3002  \"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F60\\u53EA\\u9700\\u8981\\u6E32\\u67D3\\u53F6\\u5B50\\u8282\\u70B9\\u524D\\u7684 Checkbox\\uFF0C\\u5E76\\u4E14\\u70B9\\u51FB\\u7236\\u8282\\u70B9\\u65F6\\u4E0D\\u89E6\\u53D1\\u9009\\u4E2D\\uFF0C\\u70B9\\u51FB\\u53F6\\u5B50\\u8282\\u70B9\\u89E6\\u53D1\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u540C\\u65F6\\u5F00\\u542F leafOnly \\u53EF\\u4EE5\\u4F7F onChange \\u7684\\u56DE\\u8C03\\u5165\\u53C2\\u90FD\\u662F\\u53F6\\u5B50\\u8282\\u70B9\\u3002\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"\\u26A0\\uFE0F\\uFF1ArenderFullLabel \\u53EA\\u63A5\\u7BA1\\u4E86\\u6E32\\u67D3\\u6548\\u679C\\uFF0C\\u5E76\\u4E0D\\u5F71\\u54CD\\u5185\\u90E8\\u7684\\u6570\\u636E\\u903B\\u8F91\\u3002\\u4F46\\u662F\\u4F60\\u53EF\\u4EE5\\u9009\\u53D6\\u9700\\u8981\\u7684\\u903B\\u8F91\\u8FDB\\u884C\\u6E32\\u67D3\\uFF0C\\u6216\\u8005\\u914D\\u5408\\u53D7\\u63A7\\u6765\\u5B9E\\u73B0\\u66F4\\u590D\\u6742\\u7684\\u9700\\u6C42\\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 { Tree, Checkbox } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const renderLabel = ({\\n        className,\\n        onExpand,\\n        data,\\n        onCheck,\\n        checkStatus,\\n        expandIcon,\\n    }) => {\\n        const { label } = data;\\n        const isLeaf = !(data.children && data.children.length);\\n        return (\\n            <li\\n                className={className}\\n                role=\\\"treeitem\\\"\\n                onClick={isLeaf ? onCheck : onExpand}\\n            >\\n                {isLeaf ? null : expandIcon}\\n                {isLeaf ? <div onClick={onCheck} role='checkbox' tabIndex={0} aria-checked={checkStatus.checked}>\\n                    <Checkbox\\n                        indeterminate={checkStatus.halfChecked}\\n                        checked={checkStatus.checked}\\n                        style={{ marginRight: 8 }}\\n                    />\\n                </div> : null}\\n                <span>{label}</span>\\n            </li>\\n        );\\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\\n    const treeStyle = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeData}\\n            renderFullLabel={renderLabel}\\n            multiple\\n            leafOnly\\n            style={treeStyle}\\n        />\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7B2C\\u4E8C\\u4E2A\\u662F\\u9488\\u5BF9 \\u201C\\u5E0C\\u671B\\u53EA\\u6709\\u53F6\\u5B50\\u8282\\u70B9\\u53EF\\u4EE5\\u5355\\u9009\\uFF0C\\u7236\\u8282\\u70B9\\u53EA\\u8D77\\u5230\\u5206\\u7EC4\\u4F5C\\u7528\\u201D \\u7684\\u573A\\u666F\\u3002  \"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F60\\u53EA\\u9700\\u8981\\u70B9\\u51FB\\u7236\\u8282\\u70B9\\u65F6\\u4E0D\\u89E6\\u53D1\\u9009\\u4E2D\\uFF0C\\u70B9\\u51FB\\u53F6\\u5B50\\u8282\\u70B9\\u89E6\\u53D1\\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 { Tree } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const renderLabel = ({\\n        className,\\n        onExpand,\\n        onClick,\\n        data,\\n        expandIcon,\\n    }) => {\\n        const { label } = data;\\n        const isLeaf = !(data.children && data.children.length);\\n        return (\\n            <li\\n                className={className}\\n                role=\\\"treeitem\\\"\\n                onClick={isLeaf ? onClick : onExpand}\\n            >\\n                {expandIcon}\\n                <span>{label}</span>\\n            </li>\\n        );\\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\\n    const treeStyle = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n    return (\\n        <Tree\\n            treeData={treeData}\\n            renderFullLabel={renderLabel}\\n            style={treeStyle}\\n            onChange={(...args) => console.log('change', ...args)}\\n        />\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7B2C\\u4E09\\u4E2A\\u662F\\u9488\\u5BF9 \\u201C\\u5355\\u9009\\u9009\\u4E2D\\u7236\\u8282\\u70B9\\u540C\\u65F6\\u4E5F\\u9AD8\\u4EAE\\u5B50\\u8282\\u70B9\\u201D \\u7684\\u573A\\u666F\\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 { Tree } from '@douyinfe/semi-ui';\\nimport { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSectionStroked, IconComponentStroked } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [selected, setSelected] = useState(new Set());\\n    const [selectedThroughParent, setSelectedThroughParent] = useState(new Set());\\n    const treeData = [\\n        {\\n            label: '\\u9ED1\\u8272\\u56FA\\u5B9A\\u6309\\u94AE',\\n            icon: <IconFixedStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n            key: 'fix-btn-0'\\n        },\\n        {\\n            label: '\\u6A21\\u5757',\\n            key: 'module-0',\\n            icon: <IconSectionStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n            children: [\\n                {\\n                    label: '\\u53EF\\u81EA\\u7531\\u6446\\u653E\\u7684\\u7EC4\\u4EF6',\\n                    icon: <IconAbsoluteStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                    key: 'free-compo-0',\\n                },\\n                {\\n                    label: '\\u5206\\u680F\\u5BB9\\u5668',\\n                    icon: <IconInnerSectionStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                    key: 'split-col-0',\\n                    children: [\\n                        {\\n                            label: '\\u6309\\u94AE\\u7EC4\\u4EF6',\\n                            icon: <IconComponentStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                            key: 'btn-0'\\n                        },\\n                        {\\n                            label: '\\u6309\\u94AE\\u7EC4\\u4EF6',\\n                            icon: <IconComponentStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                            key: 'btn-1'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u6A21\\u5757',\\n            icon: <IconSectionStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n            key: 'module-1',\\n            children: [\\n                {\\n                    label: '\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6',\\n                    icon: <IconComponentStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                    key: 'cus-0'\\n                }\\n            ]\\n        }\\n    ];\\n    const findDescendantKeys = (node) => {\\n        let res = [node.key];\\n        const findChild = item => {\\n            if (!item) return;\\n            const { children } = item;\\n\\n            if (children && children.length) {\\n                children.forEach(child => {\\n                    res.push(child.key);\\n                    findChild(child);\\n                });\\n            }\\n        };\\n        findChild(node);\\n        return res;\\n    };\\n    const handleSelect = (key, bool, node) => {\\n        setSelected(new Set([key]));\\n        const descendantKeys = findDescendantKeys(node);\\n        setSelectedThroughParent(new Set(descendantKeys));\\n    };\\n    const renderLabel = ({\\n        className,\\n        data,\\n        onClick,\\n        expandIcon\\n    }) => {\\n        const { label, icon, key } = data;\\n        const isLeaf = !(data.children && data.children.length);\\n        const style = {\\n            backgroundColor: selected.has(key)\\n                ? 'rgba(var(--semi-blue-0), 1)'\\n                : selectedThroughParent.has(key)\\n                    ? 'rgba(var(--semi-blue-0), .5)' : 'transparent'\\n        };\\n        return (\\n            <li\\n                className={className}\\n                role=\\\"treeitem\\\"\\n                onClick={onClick}\\n                style={style}\\n            >\\n                {isLeaf ? <span style={{ width: 24 }}></span> : expandIcon}\\n                {icon}\\n                <span>{label}</span>\\n            </li>\\n        );\\n    };\\n\\n    const treeStyle = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n\\n    return (\\n        <Tree\\n            treeData={treeData}\\n            renderFullLabel={renderLabel}\\n            onSelect={handleSelect}\\n            style={treeStyle}\\n            defaultExpandAll\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u62D6\\u62FD\\u7684\\u9AD8\\u7EA7\\u5B9A\\u5236\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u4ECE 1.27.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301\\u53EF\\u62D6\\u62FD\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"draggable\"), \"\\uFF09\\u548C\\u9AD8\\u7EA7\\u5B9A\\u5236\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFullLabel\"), \"\\uFF09\\u540C\\u65F6\\u4F7F\\u7528\\uFF0C\\u5728\\u8BE5\\u7248\\u672C\\u4E4B\\u524D\\uFF0C\\u5E76\\u4E0D\\u652F\\u6301\\u4E8C\\u8005\\u540C\\u65F6\\u4F7F\\u7528\\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 { Tree } from '@douyinfe/semi-ui';\\nimport { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSectionStroked, IconComponentStroked } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [selected, setSelected] = useState(new Set());\\n    const [selectedThroughParent, setSelectedThroughParent] = useState(new Set());\\n    const defaultTreeData = [\\n        {\\n            label: '\\u9ED1\\u8272\\u56FA\\u5B9A\\u6309\\u94AE',\\n            icon: <IconFixedStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n            key: 'fix-btn-0'\\n        },\\n        {\\n            label: '\\u6A21\\u5757',\\n            key: 'module-0',\\n            icon: <IconSectionStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n            children: [\\n                {\\n                    label: '\\u53EF\\u81EA\\u7531\\u6446\\u653E\\u7684\\u7EC4\\u4EF6',\\n                    icon: <IconAbsoluteStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                    key: 'free-compo-0',\\n                },\\n                {\\n                    label: '\\u5206\\u680F\\u5BB9\\u5668',\\n                    icon: <IconSectionStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                    key: 'split-col-0',\\n                    children: [\\n                        {\\n                            label: '\\u6309\\u94AE\\u7EC4\\u4EF6',\\n                            icon: <IconComponentStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                            key: 'btn-0'\\n                        },\\n                        {\\n                            label: '\\u6309\\u94AE\\u7EC4\\u4EF6',\\n                            icon: <IconComponentStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                            key: 'btn-1'\\n                        }\\n                    ]\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u6A21\\u5757',\\n            icon: <IconSectionStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n            key: 'module-1',\\n            children: [\\n                {\\n                    label: '\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6',\\n                    icon: <IconComponentStroked style={{ marginRight: 8, color: 'var(--semi-color-text-2)' }} />,\\n                    key: 'cus-0'\\n                }\\n            ]\\n        }\\n    ];\\n    const [treeData, setTreeData] = useState(defaultTreeData);\\n\\n    const onDrop = (info) => {\\n        const { dropToGap, node, dragNode } = info;\\n        const dropKey = node.key;\\n        const dragKey = dragNode.key;\\n        const dropPos = node.pos.split('-');\\n        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\\n\\n        const data = [...treeData];\\n        const loop = (data, key, callback) => {\\n            data.forEach((item, ind, arr) => {\\n                if (item.key === key) return callback(item, ind, arr);\\n                if (item.children) return loop(item.children, key, callback);\\n            });\\n        };\\n\\n        let dragObj;\\n        loop(data, dragKey, (item, ind, arr) => {\\n            arr.splice(ind, 1);\\n            dragObj = item;\\n        });\\n\\n        if (!dropToGap) {\\n            loop(data, dropKey, (item, ind, arr) => {\\n                item.children = item.children || [];\\n                item.children.push(dragObj);\\n            });\\n        } else if (dropPosition === 1 && node.children && node.expanded) {\\n            loop(data, dropKey, item => {\\n                item.children = item.children || [];\\n                item.children.unshift(dragObj);\\n            });\\n        } else {\\n            let dropNodeInd;\\n            let dropNodePosArr;\\n            loop(data, dropKey, (item, ind, arr) => {\\n                dropNodePosArr = arr;\\n                dropNodeInd = ind;\\n            });\\n            if (dropPosition === -1) {\\n                dropNodePosArr.splice(dropNodeInd, 0, dragObj);\\n            } else {\\n                dropNodePosArr.splice(dropNodeInd + 1, 0, dragObj);\\n            }\\n        }\\n        setTreeData(data);\\n    };\\n\\n    const findDescendantKeys = (node) => {\\n        const res = [node.key];\\n        const findChild = item => {\\n            if (!item) return;\\n            const { children } = item;\\n\\n            if (children && children.length) {\\n                children.forEach(child => {\\n                    res.push(child.key);\\n                    findChild(child);\\n                });\\n            }\\n        };\\n        findChild(node);\\n        return res;\\n    };\\n\\n    const handleSelect = (key, bool, node) => {\\n        setSelected(new Set([key]));\\n        const descendantKeys = findDescendantKeys(node);\\n        setSelectedThroughParent(new Set(descendantKeys));\\n    };\\n\\n    const renderLabel = ({\\n        className,\\n        data,\\n        onClick,\\n        expandIcon\\n    }) => {\\n        const { label, icon, key } = data;\\n        const isLeaf = !(data.children && data.children.length);\\n        const style = {\\n            backgroundColor: selected.has(key)\\n                ? 'rgba(var(--semi-blue-0), 1)'\\n                : selectedThroughParent.has(key)\\n                    ? 'rgba(var(--semi-blue-0), .5)' : 'transparent'\\n        };\\n        return (\\n            <li\\n                className={className}\\n                role=\\\"treeitem\\\"\\n                onClick={onClick}\\n                style={style}\\n            >\\n                {isLeaf ? <span style={{ width: 24 }}></span> : expandIcon}\\n                {icon}\\n                <span>{label}</span>\\n            </li>\\n        );\\n    };\\n\\n    const treeStyle = {\\n        width: 260,\\n        height: 420,\\n        border: '1px solid var(--semi-color-border)'\\n    };\\n\\n\\n    return <Tree\\n        treeData={treeData}\\n        draggable\\n        onDrop={onDrop}\\n        renderFullLabel={renderLabel}\\n        onSelect={handleSelect}\\n        style={treeStyle}\\n        defaultExpandAll\\n    />;\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API\\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Tree\"), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, 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\\uFF0C\\u9ED8\\u8BA4\\u4E3A false\\uFF0C\\u5F53\\u7EC4\\u4EF6\\u521D\\u6B21\\u6302\\u8F7D\\u65F6\\u4E3A true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.34.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoExpandWhenDragEnter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5141\\u8BB8\\u62D6\\u62FD\\u5230\\u8282\\u70B9\\u4E0A\\u65F6\\u81EA\\u52A8\\u5C55\\u5F00\\u6539\\u8282\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), 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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.61.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"blockNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u884C\\u663E\\u793A\\u8282\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'related'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.5.0\")), 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  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeDataSimpleJson\"), \")\\u53D1\\u751F\\u6539\\u53D8\\uFF0C\\u8FD9\\u4E2A api \\u662F\\u65E0\\u6CD5\\u5F71\\u54CD\\u8282\\u70B9\\u7684\\u9ED8\\u8BA4\\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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"string \", \"|\", \" number \", \"|\", \" TreeNodeData \", \"|\", \" (string \", \"|\", \" number \", \"|\", \" TreeNodeData)[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"directory\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u76EE\\u5F55\\u6811\\u6A21\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"\\u5F53\\u8282\\u70B9\\u7684disabled\\u72B6\\u6001\\u786E\\u5B9A\\u65F6\\uFF0C\\u4E0D\\u53EF\\u901A\\u8FC7\\u5B50\\u7EA7\\u6216\\u8005\\u7236\\u7EA7\\u7684\\u5173\\u7CFB\\u9009\\u4E2D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.4.0\")), 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  }, \"\\u7981\\u7528\\u6574\\u4E2A\\u6811\\uFF0C\\u4E0D\\u53EF\\u9009\\u62E9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.32.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"draggable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5141\\u8BB8\\u62D6\\u62FD\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), 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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.32.0\")), 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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.35.0\")), 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\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeDataSimpleJson\"), \")\\u53D1\\u751F\\u6539\\u53D8\\uFF0C\\u9ED8\\u8BA4\\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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.30.0\")), 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(\"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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode \", \"|\", \" (props: expandProps)=>ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.75.0\")), 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\\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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.47.0\")), 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 \", \"|\", \" ((inputValue: string, treeNodeString: string, data?: TreeNodeData) => boolean)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hideDraggingNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u9690\\u85CF\\u6B63\\u5728\\u62D6\\u62FD\\u7684\\u8282\\u70B9\\u7684 dragImg\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), 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 \", \"|\", \" (props: TreeNodeProps)=>ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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\\u5F00\\u542F\\uFF0C\\u5982\\u679C\\u6709\\u5176\\u4ED6\\u7701\\u7565\\u9700\\u6C42\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u5173\\u95ED\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\", \"|\", \"true(virtualized)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), 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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.18.0\")), 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< void >\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.0.0\")), 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  }, \"string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.0.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u52A8\\u753B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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(\"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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderDraggingNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6B63\\u5728\\u62D6\\u62FD\\u8282\\u70B9\\u7684 dragImg \\u7684 Html \\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(nodeInstance: HTMLElement, node: TreeNodeData) => HTMLElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), 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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(data: object) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.7.0\")), 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, searchWord \\u53C2\\u6570\\u81EA 2.65.0 \\u5F00\\u59CB\\u652F\\u6301\"), 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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.6.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"searchClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u641C\\u7D22\\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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"searchRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u6846\\u7684\\u6E32\\u67D3\\u65B9\\u6CD5\\uFF0C\\u4E3A false \\u65F6\\u53EF\\u4EE5\\u9690\\u85CF\\u7EC4\\u4EF6\\u7684\\u641C\\u7D22\\u6846(\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"V>=1.0.0\"), \")\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"((searchRenderProps: object) => ReactNode) \", \"|\", \" false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.35.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"searchStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u641C\\u7D22\\u6846\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"\\u652F\\u6301\\u6E05\\u9664\\u641C\\u7D22\\u6846\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.35.0\")), 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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.32.0\")), 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  }, \"\\u663E\\u793A\\u8FDE\\u63A5\\u7EBF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.50.0\")), 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  }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"treeNodes \\u6570\\u636E\\uFF0C\\u5982\\u679C\\u8BBE\\u7F6E\\u5219\\u4E0D\\u9700\\u8981\\u624B\\u52A8\\u6784\\u9020 TreeNode \\u8282\\u70B9\\uFF08key\\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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"treeDataSimpleJson\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7B80\\u5355 JSON \\u5F62\\u5F0F\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"TreeNodeData\"), \" \\u6570\\u636E\\uFF0C\\u5982\\u679C\\u8BBE\\u7F6E\\u5219\\u4E0D\\u9700\\u8981\\u624B\\u52A8\\u6784\\u9020 TreeNode \\u8282\\u70B9\\uFF0C\\u8FD4\\u56DE\\u503C\\u4E3A\\u5305\\u542B\\u9009\\u4E2D\\u8282\\u70B9\\u7684Json\\u6570\\u636E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TreeDataSimpleJson\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{\", \"}\"), 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(\"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  }, \"string \", \"|\", \" number \", \"|\", \" TreeNodeData \", \"|\", \" (string \", \"|\", \" number \", \"|\", \" TreeNodeData)[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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 Virtualize Object\\u3002\\u5F00\\u542F\\u540E\\u5C06\\u5173\\u95ED\\u52A8\\u753B\\u6548\\u679C\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"VirtualizeObj\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.32.0\")), 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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value?: string \", \"|\", \" number \", \"|\", \" TreeNodeData \", \"|\", \" (string \", \"|\", \" number \", \"|\", \" TreeNodeData)[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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\\u578B\\u4F1A\\u4ECE string \\u53D8\\u4E3A object: { value, label, ...rest }\\u3002\\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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDoubleClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53CC\\u51FB\\u4E8B\\u4EF6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, node: TreeNodeData) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.35.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragEnd\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragEnd \\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(dragProps: object) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragEnter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragEnter \\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(dragEnterProps: object) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragLeave\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragLeave \\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(dragProps: object) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragOver\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragOver \\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(dragProps: object) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragStart\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDragStart \\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(dragProps: object) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDrop\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDrop \\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(onDragProps: object) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.8.0\")), 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  }, \"(expandedKeys: string[], {expanded: boolean, node: TreeNodeData}) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"(loadedKeys: Set\", mdx(\"string\", null), \", treeNode: TreeNodeData) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.0.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onContextMenu\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53F3\\u952E\\u70B9\\u51FB\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent, node: TreeNodeData) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.35.0\")), 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, \\u5165\\u53C2 filteredExpandedKeys \\u8868\\u793A\\u56E0\\u4E3A\\u641C\\u7D22\\u6216 value / defaultValue \\u800C\\u5C55\\u5F00\\u7684\\u8282\\u70B9\\u7684 key, \", mdx(\"br\", null), \"\\u53EF\\u4EE5\\u914D\\u5408 expandedKeys \\u53D7\\u63A7\\u65F6\\u4F7F\\u7528\\u3002filteredExpandedKeys \\u5728 2.38.0 \\u4E2D\\u65B0\\u589E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(sunInput: string, filteredExpandedKeys: string[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"(selectedKey:string, selected: bool, selectedNode: TreeNodeData) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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\\u3002\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"v>=1.7.0\"), \" \\u4E4B\\u524D value \\u503C\\u8981\\u6C42\\u5FC5\\u987B\\u5FC5\\u586B\\u4E14\\u552F\\u4E00\\u3002\\n\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"v>=1.7.0\"), \" \\u4E4B\\u540E value \\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\"), 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  }, \"\\u8BBE\\u7F6E\\u8282\\u70B9\\u4E3A\\u53F6\\u5B50\\u8282\\u70B9\\uFF0C\\u5728\\u5F02\\u6B65\\u52A0\\u8F7D\\u6570\\u636E\\u7684\\u60C5\\u51B5\\u5373\\u4F20\\u5165 loadData \\u65F6\\u6709\\u6548 \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v>=1.0.0\")), 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  }, \"Virtualize Object\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"itemSize\"), \" \\u5FC5\\u4F20\\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  }, \"height\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9AD8\\u5EA6\\u503C\\uFF0C\\u5982\\u679C\\u4E3A string \\u5FC5\\u987B\\u4FDD\\u8BC1\\u6709\\u8BA1\\u7B97\\u9AD8\\u5EA6\\uFF0C\\u5373\\u5176\\u7236\\u8282\\u70B9\\u6709 offsetHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'100%'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"itemSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6BCF\\u884C\\u7684treeNode\\u7684\\u9AD8\\u5EA6\\uFF0C\\u5FC5\\u4F20\"), 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  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BBD\\u5EA6\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'100%'\"))))), mdx(\"section\", null, mdx(\"h2\", {\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  }, \"\\u540D\\u79F0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63CF\\u8FF0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"search\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u624B\\u52A8\\u89E6\\u53D1\\u641C\\u7D22\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: string) => 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  }, \"scrollTo\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5728\\u865A\\u62DF\\u5316 Tree \\u4E2D\\uFF0C\\u4F7F\\u5F97\\u6307\\u5B9A\\u8282\\u70B9\\uFF08\\u8BE5\\u8282\\u70B9\\u4E3A\\u5F53\\u524D\\u6811\\u7684\\u5DF2\\u5C55\\u5F00\\u8282\\u70B9\\uFF09\\u6EDA\\u52A8\\u5230\\u89C6\\u56FE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\uFF08{key: string; align?: 'center' \", \"|\", \" 'start' \", \"|\", \" 'end' \", \"|\", \" 'smart' \", \"|\", \" 'auto';}) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.18.0\"))))), 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  }, \"Tree \\u652F\\u6301\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u6765\\u8868\\u793A\\u8BE5 Tree \\u4F5C\\u7528;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tree \\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(\"li\", {\n    parentName: \"ul\"\n  }, \"Tree \\u4F1A\\u81EA\\u52A8\\u4E3A\\u5BF9\\u5E94\\u90E8\\u5206\\u5206\\u522B\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"tree\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"treeitem\"), \"\\u3002\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u793A\\u4F8B:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"    <Tree\\n        /* other attributes */\\n        aria-label='example tree'\\n    />\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5C3D\\u91CF\\u4F7F\\u7528\\u77ED\\u8BED\\uFF0C\\u9996\\u5B57\\u6BCD\\u5927\\u5199\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5E73\\u7EA7\\u4E4B\\u95F4\\u4FDD\\u6301\\u7528\\u8BED\\u5F62\\u5F0F\\u4E00\\u81F4\\uFF0C\\u4F8B\\u5982\\u5168\\u662F\\u5730\\u540D\\u6216\\u8005\\u662F\\u56FD\\u5BB6\\u540D\"))), 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/navigation/tree","next":{"fields":{"slug":"en-US/show/avatar"},"id":"db3b5637-3e1e-5a88-8e65-ac60dae12cab","frontmatter":{"title":"Avatar","localeCode":"en-US","icon":"doc-avatar","showNew":null}},"previous":{"fields":{"slug":"en-US/navigation/tree"},"id":"0f65838e-a403-558e-bc69-673f1acc565a","frontmatter":{"title":"Tree","localeCode":"en-US","icon":"doc-tree","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}