{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/input/transfer","result":{"data":{"current":{"frontmatter":{"title":"Transfer 穿梭框","order":51,"brief":"一个更直观高效的多选选择器，可以露出更多选项的信息，支持搜索功能，缺点是占据更多空间","icon":"doc-transfer"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本使用","title":"基本使用"},{"url":"#分组","title":"分组"},{"url":"#自定义筛选逻辑自定义选项数据渲染","title":"自定义筛选逻辑，自定义选项数据渲染"},{"url":"#禁用","title":"禁用"},{"url":"#拖拽排序","title":"拖拽排序"},{"url":"#拖拽--自定义已选项渲染","title":"拖拽 + 自定义已选项渲染"},{"url":"#自定义渲染面板头部信息","title":"自定义渲染面板头部信息"},{"url":"#完全自定义渲染","title":"完全自定义渲染"},{"url":"#完全自定义渲染--拖拽排序","title":"完全自定义渲染 、 拖拽排序"},{"url":"#树穿梭框","title":"树穿梭框"},{"url":"#树穿梭框自定义头部显示叶子节点数量","title":"树穿梭框自定义头部显示叶子节点数量"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#transfer-props","title":"Transfer Props"},{"url":"#item-interface","title":"Item Interface"},{"url":"#groupitem-interface","title":"GroupItem Interface"},{"url":"#treeitem-interface","title":"TreeItem Interface"}]},{"url":"#methods","title":"Methods"},{"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\": 51,\n  \"category\": \"输入类\",\n  \"title\": \"Transfer 穿梭框\",\n  \"icon\": \"doc-transfer\",\n  \"width\": \"60%\",\n  \"dir\": \"column\",\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 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 { Transfer } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6570\\u636E\\u9879\\u9700\\u4F20\\u5165 value\\u3001label\\u3001key\"), 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 from 'react';\\nimport { Transfer } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const data = Array.from({ length: 100 }, (v, i) => {\\n        return {\\n            label: `\\u9009\\u9879\\u540D\\u79F0 ${i}`,\\n            value: i,\\n            disabled: false,\\n            key: `key-${i}`,\\n        };\\n    });\\n    return (\\n        <Transfer\\n            style={{ width: 568, height: 416 }}\\n            dataSource={data}\\n            onChange={(values, items) => console.log(values, items)}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5206\\u7EC4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 type \\u8BBE\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"groupList\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5206\\u7EC4\\u7684 dataSource\\uFF0C\\u4E00\\u7EA7\\u5B50\\u5143\\u7D20\\u5FC5\\u987B\\u62E5\\u6709 title \\u4EE5\\u53CA children \\u5C5E\\u6027\\uFF0C\\u7ED3\\u6784\\u53C2\\u8003 <GroupItem\", \">\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6682\\u4E0D\\u652F\\u6301\\u591A\\u5C42\\u5D4C\\u5957\"), 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 from 'react';\\nimport { Transfer } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const dataWithGroup = [\\n        {\\n            title: '\\u7C7B\\u522BA',\\n            children: [\\n                { label: 'A-1', value: 1, disabled: false, key: 1 },\\n                { label: 'A-2', value: 2, disabled: false, key: 2 },\\n                { label: 'A-3', value: 3, disabled: false, key: 3 },\\n            ],\\n        },\\n        {\\n            title: '\\u7C7B\\u522BB',\\n            children: [\\n                { label: 'B-1', value: 4, disabled: false, key: 4 },\\n                { label: 'B-2', value: 5, disabled: false, key: 5 },\\n                { label: 'B-3\\uFF08disabled\\uFF09', value: 6, disabled: true, key: 6 },\\n            ],\\n        },\\n        {\\n            title: '\\u7C7B\\u522BC',\\n            children: [\\n                { label: 'C-1', value: 7, disabled: false, key: 7 },\\n                { label: 'C-2', value: 8, disabled: false, key: 8 },\\n                { label: 'C-3', value: 9, disabled: false, key: 9 },\\n                { label: 'C-4', value: 10, disabled: false, key: 10 },\\n                { label: 'C-5', value: 11, disabled: false, key: 11 },\\n                { label: 'C-6', value: 12, disabled: false, key: 12 },\\n                { label: 'C-7', value: 13, disabled: false, key: 13 },\\n            ],\\n        },\\n    ];\\n    return (\\n        <Transfer\\n            type=\\\"groupList\\\"\\n            defaultValue={[6]}\\n            style={{ width: 568 }}\\n            dataSource={dataWithGroup}\\n            onChange={(values, items) => console.log(values, items)}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7B5B\\u9009\\u903B\\u8F91\\uFF0C\\u81EA\\u5B9A\\u4E49\\u9009\\u9879\\u6570\\u636E\\u6E32\\u67D3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filter\"), \"\\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u903B\\u8F91\\uFF0C\\u8FD4\\u56DE true \\u65F6\\u8868\\u793A\\u5F53\\u524D\\u9879\\u7B26\\u5408\\u7B5B\\u9009\\u89C4\\u5219\\uFF0C\\u4FDD\\u7559\\u5F53\\u524D\\u9879\\u5728\\u5217\\u8868\\u4E2D\\u7684\\u663E\\u793A\\uFF0C\\u8FD4\\u56DE false \\u5219\\u8868\\u793A\\u4E0D\\u7B26\\u5408\\uFF0C\\u5F53\\u524D\\u9879\\u4F1A\\u88AB\\u9690\\u85CF\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5F53 type \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeList\"), \"\\u65F6\\uFF0C\\u5982\\u9700\\u8981\\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u903B\\u8F91\\uFF0C\\u9700\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filter\"), \" \\u4E3A true\\uFF0C\\u5E76\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeProps\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterTreeNode\"), \" \\u8BBE\\u7F6E\\u81EA\\u5B9A\\u4E49\\u7684\\u641C\\u7D22\\u51FD\\u6570\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F7F\\u7528\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSourceItem\"), \"\\uFF0C\\u4F60\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u5DE6\\u4FA7\\u6BCF\\u4E00\\u6761\\u6E90\\u6570\\u636E\\u7684\\u6E32\\u67D3\\u7ED3\\u6784\\u3002\\u4F8B\\u5982\\u7ED3\\u5408 Highlight \\u7EC4\\u4EF6\\u9AD8\\u4EAE\\u641C\\u7D22\\u5339\\u914D\\u6587\\u672C\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F7F\\u7528\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSelectedItem\"), \" \\u4F60\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u53F3\\u4FA7\\u6BCF\\u4E00\\u6761\\u5DF2\\u9009\\u9879\\u7684\\u6E32\\u67D3\\u7ED3\\u6784\\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 from 'react';\\nimport { Transfer, Checkbox, Avatar, Highlight } from '@douyinfe/semi-ui';\\nimport { IconClose } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [searchText, setSearchText] = useState('');\\n    const renderSourceItem = item => {\\n        return (\\n            <div className=\\\"components-transfer-demo-source-item\\\" key={item.label}>\\n                <Checkbox\\n                    onChange={() => {\\n                        item.onChange();\\n                    }}\\n                    key={item.label}\\n                    checked={item.checked}\\n                    style={{ height: 52, alignItems: 'center' }}\\n                >\\n                    <Avatar color={item.color} size=\\\"small\\\">\\n                        {item.abbr}\\n                    </Avatar>\\n                    <div className=\\\"info\\\">\\n                        <div className=\\\"name\\\">\\n                            <Highlight sourceString={item.label} searchWords={[searchText]}></Highlight>\\n                        </div>\\n                        <div className=\\\"email\\\">\\n                            <Highlight sourceString={item.value} searchWords={[searchText]}></Highlight>\\n                        </div>\\n                    </div>\\n                </Checkbox>\\n            </div>\\n        );\\n    };\\n\\n    const renderSelectedItem = item => {\\n        return (\\n            <div className=\\\"components-transfer-demo-selected-item\\\" key={item.label}>\\n                <Avatar color={item.color} size=\\\"small\\\">\\n                    {item.abbr}\\n                </Avatar>\\n                <div className=\\\"info\\\">\\n                    <div className=\\\"name\\\">{item.label}</div>\\n                    <div className=\\\"email\\\">{item.value}</div>\\n                </div>\\n                <IconClose onClick={item.onRemove} />\\n            </div>\\n        );\\n    };\\n\\n    const customFilter = (sugInput, item) => {\\n        return item.value.includes(sugInput) || item.label.includes(sugInput);\\n    };\\n\\n    const data = [\\n        { label: '\\u590F\\u53EF\\u6F2B', value: 'xiakeman@example.com', abbr: '\\u590F', color: 'amber', area: 'US', key: 1 },\\n        { label: '\\u7533\\u60A6', value: 'shenyue@example.com', abbr: '\\u7533', color: 'indigo', area: 'UK', key: 2 },\\n        { label: '\\u6587\\u5609\\u8302', value: 'wenjiamao@example.com', abbr: '\\u6587', color: 'cyan', area: 'HK', key: 3 },\\n        { label: '\\u66F2\\u6668\\u4E00', value: 'quchenyi@example.com', abbr: '\\u66F2', color: 'blue', area: 'India', key: 4 },\\n        { label: '\\u66F2\\u6668\\u4E8C', value: 'quchener@example.com', abbr: '\\u4E8C', color: 'blue', area: 'India', key: 5 },\\n        { label: '\\u66F2\\u6668\\u4E09', value: 'quchensan@example.com', abbr: '\\u4E09', color: 'blue', area: 'India', key: 6 },\\n    ];\\n\\n    return (\\n        <Transfer\\n            style={{ width: 568 }}\\n            dataSource={data}\\n            filter={customFilter}\\n            defaultValue={['xiakeman@example.com', 'shenyue@example.com']}\\n            renderSelectedItem={renderSelectedItem}\\n            renderSourceItem={renderSourceItem}\\n            inputProps={{ placeholder: '\\u641C\\u7D22\\u59D3\\u540D\\u6216\\u90AE\\u7BB1' }}\\n            onSearch={searchText => setSearchText(searchText)}\\n            onChange={(values, items) => console.log(values, items)}\\n        />\\n    );\\n};\\n\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \".components-transfer-demo-selected-item {\\n    .semi-icon-close {\\n        visibility: hidden;\\n        color: var(--semi-color-tertiary);\\n    }\\n    &:hover {\\n        .semi-icon-close {\\n            visibility: visible;\\n        }\\n    }\\n}\\n\\n.components-transfer-demo-selected-item,\\n.components-transfer-demo-source-item {\\n    height: 52px;\\n    box-sizing: border-box;\\n    display: flex;\\n    align-items: center;\\n    justify-content: space-between;\\n    padding: 10px 12px;\\n    &:hover {\\n        background-color: var(--semi-color-fill-0);\\n    }\\n    .info {\\n        margin-left: 8px;\\n        flex-grow: 1;\\n    }\\n    .name {\\n        font-size: 14px;\\n        line-height: 20px;\\n    }\\n    .email {\\n        font-size: 12px;\\n        line-height: 16px;\\n        color: var(--semi-color-text-2);\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7981\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Transfer } from '@douyinfe/semi-ui';\\n() => {\\n    const data = Array.from({ length: 20 }, (v, i) => {\\n        return {\\n            label: `\\u9009\\u9879\\u540D\\u79F0 ${i}`,\\n            value: i,\\n            disabled: false,\\n            key: `key-${i}`,\\n        };\\n    });\\n    return (\\n        <Transfer\\n            style={{ width: 568, height: 416 }}\\n            disabled\\n            dataSource={data}\\n            defaultValue={[2, 4]}\\n            onChange={(values, items) => console.log(values, items)}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u62D6\\u62FD\\u6392\\u5E8F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"draggable\"), \"\\u8BBE\\u4E3A true\\uFF0C\\u5F00\\u542F\\u62D6\\u62FD\\u6392\\u5E8F\\u529F\\u80FD\\u3002v1.11.0 \\u540E\\u652F\\u6301\"), 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 from 'react';\\nimport { Transfer } from '@douyinfe/semi-ui';\\n() => {\\n    const data = Array.from({ length: 30 }, (v, i) => {\\n        return {\\n            label: `\\u9009\\u9879\\u540D\\u79F0 ${i}`,\\n            value: i,\\n            disabled: false,\\n            key: `key-${i}`,\\n        };\\n    });\\n    return (\\n        <Transfer\\n            style={{ width: 568, height: 416 }}\\n            dataSource={data}\\n            defaultValue={[2, 4]}\\n            draggable\\n            onChange={(values, items) => console.log(values, items)}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u62D6\\u62FD + \\u81EA\\u5B9A\\u4E49\\u5DF2\\u9009\\u9879\\u6E32\\u67D3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"draggable\"), \"\\u8BBE\\u4E3A true\\uFF0C\\u5F00\\u542F\\u62D6\\u62FD\\u6392\\u5E8F\\u529F\\u80FD;\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSelectedItem\"), \" \\u81EA\\u5B9A\\u4E49\\u53F3\\u4FA7\\u5DF2\\u9009\\u9879\\u6E32\\u67D3\\uFF1B\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F60\\u53EF\\u4EE5\\u5C06\\u89E6\\u53D1\\u5668\\u5B9A\\u4E49\\u4E3A\\u4EFB\\u610F\\u4F60\\u60F3\\u8981\\u7684ReactNode\\uFF0C\\u5E76\\u4E14\\u6DFB\\u52A0\\u6837\\u5F0F\\u3002\\u5C06\\u62D6\\u62FD\\u89E6\\u53D1\\u5668\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sortableHandle\"), \" \\u8FDB\\u884C\\u5305\\u88F9\\u5373\\u53EF, \"), 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 from 'react';\\nimport { Transfer, Checkbox, Avatar } from '@douyinfe/semi-ui';\\nimport { IconHandle, IconClose } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const renderSourceItem = item => {\\n        return (\\n            <div className=\\\"components-transfer-demo-source-item\\\" key={item.label}>\\n                <Checkbox\\n                    onChange={() => {\\n                        item.onChange();\\n                    }}\\n                    key={item.label}\\n                    checked={item.checked}\\n                    style={{ height: 52, alignItems: 'center' }}\\n                >\\n                    <Avatar color={item.color} size=\\\"small\\\">\\n                        {item.abbr}\\n                    </Avatar>\\n                    <div className=\\\"info\\\">\\n                        <div className=\\\"name\\\">{item.label}</div>\\n                        <div className=\\\"email\\\">{item.value}</div>\\n                    </div>\\n                </Checkbox>\\n            </div>\\n        );\\n    };\\n\\n    const renderSelectedItem = item => {\\n        const { sortableHandle } = item;\\n        const DragHandle = sortableHandle(() => <IconHandle className={`semi-right-item-drag-handler`} />); \\n        return (\\n            <div className=\\\"components-transfer-demo-selected-item\\\" key={item.label}>\\n                <DragHandle />\\n                <Avatar color={item.color} size=\\\"small\\\">\\n                    {item.abbr}\\n                </Avatar>\\n                <div className=\\\"info\\\">\\n                    <div className=\\\"name\\\">{item.label}</div>\\n                    <div className=\\\"email\\\">{item.value}</div>\\n                </div>\\n                <IconClose onClick={item.onRemove} />\\n            </div>\\n        );\\n    };\\n\\n    const customFilter = (sugInput, item) => {\\n        return item.value.includes(sugInput) || item.label.includes(sugInput);\\n    };\\n\\n    const data = [\\n        { label: '\\u590F\\u53EF\\u6F2B', value: 'xiakeman@example.com', abbr: '\\u590F', color: 'amber', area: 'US', key: 1 },\\n        { label: '\\u7533\\u60A6', value: 'shenyue@example.com', abbr: '\\u7533', color: 'indigo', area: 'UK', key: 2 },\\n        { label: '\\u6587\\u5609\\u8302', value: 'wenjiamao@example.com', abbr: '\\u6587', color: 'cyan', area: 'HK', key: 3 },\\n        { label: '\\u66F2\\u6668\\u4E00', value: 'quchenyi@example.com', abbr: '\\u66F2', color: 'blue', area: 'India', key: 4 },\\n        { label: '\\u66F2\\u6668\\u4E8C', value: 'quchener@example.com', abbr: '\\u4E8C', color: 'blue', area: 'India', key: 5 },\\n        { label: '\\u66F2\\u6668\\u4E09', value: 'quchensan@example.com', abbr: '\\u4E09', color: 'blue', area: 'India', key: 6 },\\n    ];\\n\\n    return (\\n        <Transfer\\n            draggable\\n            style={{ width: 568 }}\\n            dataSource={data}\\n            filter={customFilter}\\n            defaultValue={['xiakeman@example.com', 'shenyue@example.com']}\\n            renderSelectedItem={renderSelectedItem}\\n            renderSourceItem={renderSourceItem}\\n            inputProps={{ placeholder: '\\u641C\\u7D22\\u59D3\\u540D\\u6216\\u90AE\\u7BB1' }}\\n            onChange={(values, items) => console.log(values, items)}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u9762\\u677F\\u5934\\u90E8\\u4FE1\\u606F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u81EA 2.29.0 \\u7248\\u672C\\u63D0\\u4F9B \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSourceHeader\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSelectedHeader\"), \" \\u53C2\\u6570\\u5141\\u8BB8\\u7528\\u6237\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5DE6\\u53F3\\u4E24\\u4E2A\\u9762\\u677F\\u7684\\u5934\\u90E8\\u4FE1\\u606F\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSourceHeader: (props: SourceHeaderProps) => ReactNode\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSelectedHeader: (props: SelectedHeaderProps) => ReactNode\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u53C2\\u6570\\u7C7B\\u578B\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"type SourceHeaderProps = {\\n    num: number; // \\u6570\\u636E\\u603B\\u6570\\u6216\\u7B5B\\u9009\\u7ED3\\u679C\\u6570\\u76EE\\n    showButton: boolean; // \\u662F\\u5426\\u5C55\\u793A\\u5168\\u9009/\\u53D6\\u6D88\\u5168\\u9009\\u6309\\u94AE\\n    allChecked: boolean; // \\u5F53\\u524D\\u6570\\u636E\\u662F\\u5426\\u5DF2\\u5168\\u9009\\n    onAllClick: () => void; // \\u70B9\\u51FB\\u5168\\u9009/\\u53D6\\u6D88\\u5168\\u9009\\u6309\\u94AE\\u540E\\u5E94\\u8C03\\u7528\\u7684\\u51FD\\u6570\\n    leafOnlyNum?: number; // \\u4EC5\\u5728 type \\u4E3A treeList \\u65F6\\u6709\\u6548\\uFF0C\\u8868\\u793A\\u53F6\\u5B50\\u8282\\u70B9\\u6570\\u91CF >=2.94.0\\n}\\n\\ntype SelectedHeaderProps = {\\n    num: number; // \\u5DF2\\u9009\\u4E2D\\u6570\\u636E\\u603B\\u6570\\n    showButton: boolean; // \\u662F\\u5426\\u5C55\\u793A\\u6E05\\u7A7A\\u6309\\u94AE\\n    onClear: () => void // \\u70B9\\u51FB\\u6E05\\u7A7A\\u6309\\u94AE\\u540E\\u5E94\\u8C03\\u7528\\u7684\\u51FD\\u6570\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u793A\\u4F8B\\u5982\\u4E0B\"), 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 from 'react';\\nimport { Transfer, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const data = Array.from({ length: 30 }, (v, i) => {\\n        return {\\n            label: `\\u9009\\u9879\\u540D\\u79F0 ${i}`,\\n            value: i,\\n            disabled: false,\\n            key: `key-${i}`,\\n        };\\n    });\\n\\n    const renderSourceHeader = (props) => {\\n        const { num, showButton, allChecked, onAllClick } = props;\\n        return <div style={{ margin: '10px 0 0 10px', height: 24, display: 'flex', alignItems: 'center' }}>\\n            <span>\\u5171 {num} \\u9879</span>\\n            {showButton && <Button\\n                theme=\\\"borderless\\\"\\n                type=\\\"tertiary\\\"\\n                size=\\\"small\\\" \\n                onClick={onAllClick}>{ allChecked ? '\\u53D6\\u6D88\\u5168\\u9009' : '\\u5168\\u9009' }</Button>}\\n        </div>;\\n    };\\n\\n    const renderSelectedHeader = (props) => {\\n        const { num, showButton, onClear } = props;\\n        return <div style={{ margin: '10px 0 0 10px', height: 24, display: 'flex', alignItems: 'center' }}>\\n            <span>{num} \\u9879\\u5DF2\\u9009</span>\\n            {showButton && <Button\\n                theme=\\\"borderless\\\"\\n                type=\\\"tertiary\\\"\\n                size=\\\"small\\\"\\n                onClick={onClear}>\\u6E05\\u7A7A</Button>}\\n        </div>;\\n    };\\n\\n    return (\\n        <Transfer\\n            style={{ width: 568, height: 416 }}\\n            dataSource={data}\\n            renderSourceHeader={renderSourceHeader}\\n            renderSelectedHeader={renderSelectedHeader}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u63D0\\u4F9B\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSourcePanel\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSelectedPanel\"), \" \\u5165\\u53C2\\uFF0C\\u5141\\u8BB8\\u4F60\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u5DE6\\u53F3\\u4FA7\\u4E24\\u4E2A\\u9762\\u677F\\u7684\\u6E32\\u67D3\\u7ED3\\u6784\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u901A\\u8FC7\\u8BE5\\u529F\\u80FD\\uFF0C\\u4F60\\u53EF\\u4EE5\\u76F4\\u63A5\\u590D\\u7528 Transfer \\u5185\\u90E8\\u7684\\u903B\\u8F91\\u80FD\\u529B\\uFF0C\\u5B9E\\u73B0\\u9AD8\\u5EA6\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u7ED3\\u6784\\u7684\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Transfer\"), \"\\u7EC4\\u4EF6 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSourcePanel: (sourcePanelProps: SourcePanelProps) => ReactNode\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"SourcePanelProps\"), \"\\u5305\\u542B\\u4EE5\\u4E0B\\u53C2\\u6570\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4ECE\\u4E2D\\u83B7\\u53D6\\u6570\\u636E\\u6765\\u6E32\\u67D3\\u51FA\\u4F60\\u7684 Panel \\u7ED3\\u6784\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface SourcePanelProps {\\n  value: Array<string|number>; // \\u6240\\u6709\\u9009\\u4E2D\\u9879\\u7684key\\n  loading: boolean;  // \\u662F\\u5426\\u52A0\\u8F7D\\u4E2D\\n  noMatch: boolean;  // \\u662F\\u5426\\u6CA1\\u6709\\u7B26\\u5408\\u5F53\\u524D\\u641C\\u7D22\\u503C\\u5339\\u914D\\u7684\\u9879\\n  filterData: Array<Item> // \\u5339\\u914D\\u5F53\\u524D\\u641C\\u7D22\\u503C\\u7684\\u9879\\n  sourceData: Array<Item>; // \\u6240\\u6709\\u9879\\n  allChecked: boolean; // \\u662F\\u5426\\u5168\\u90E8\\u9009\\u4E2D\\n  showNumber: number; // \\u7B5B\\u9009\\u7ED3\\u679C\\u6570\\u91CF\\n  inputValue: string; // input\\u641C\\u7D22\\u6846\\u7684\\u503C\\n  onSearch: (searchString: string) => any; // \\u641C\\u7D22\\u6846\\u53D8\\u5316\\u65F6\\u5E94\\u8C03\\u7528\\u7684\\u51FD\\u6570\\uFF0C\\u5165\\u53C2\\u4E3A\\u641C\\u7D22\\u503C\\n  onAllClick: () => void; // \\u5DE6\\u4FA7\\u5168\\u90E8\\u6309\\u94AE\\u70B9\\u51FB\\u65F6\\u5E94\\u8C03\\u7528\\u7684\\u51FD\\u6570\\n  onSelectOrRemove: (item: Item) => any; //\\u9009\\u62E9\\u3001\\u5220\\u9664\\u5355\\u4E2A\\u9009\\u9879\\u65F6\\u5E94\\u8C03\\u7528\\u7684\\u51FD\\u6570\\uFF0C\\u5165\\u53C2\\u5E94\\u4E3A\\u5F53\\u524D\\u64CD\\u4F5Citem\\n  onSelect: (value:Array<string|number>)=>void; // \\u53D7\\u63A7\\u6279\\u91CF\\u9009\\u4E2Dkey\\n  selectedItem: Map, // \\u6240\\u6709\\u5DF2\\u9009\\u9879\\u7684\\u96C6\\u5408\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSelectedPanel: (selectedPanelProps: SelectedPanelProps) => ReactNode\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"SelectedPanelProps\"), \"\\u5305\\u542B\\u4EE5\\u4E0B\\u53C2\\u6570\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface SelectedPanelProps {\\n  length: number; // \\u5DF2\\u9009\\u9879\\u7684\\u6570\\u91CF\\n  onClear: () => void; // \\u70B9\\u51FB\\u6E05\\u7A7A\\u65F6\\u5E94\\u8C03\\u7528\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\n  onRemove: (item: Item) => void; // \\u5220\\u9664\\u5355\\u4E2A\\u9009\\u9879\\u65F6\\u5E94\\u8C03\\u7528\\u7684\\u51FD\\u6570\\n  onSortEnd: ({ oldIndex, newIndex}) => void; // \\u5BF9\\u7ED3\\u679C\\u91CD\\u65B0\\u6392\\u5E8F\\u65F6\\u5E94\\u8C03\\u7528\\u7684\\u51FD\\u6570\\n  selectedData: Array<Item>; // \\u6240\\u6709\\u5DF2\\u9009\\u9879\\u96C6\\u5408\\n}\\n\")), 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 from 'react';\\nimport { Transfer, Input, Spin, Button } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\nclass CustomRenderDemo extends React.Component {\\n    constructor(props) {\\n        super(props);\\n        this.state = {\\n            dataSource: Array.from({ length: 100 }, (v, i) => ({\\n                label: `\\u6D77\\u5E95\\u635E\\u95E8\\u5E97 ${i}`,\\n                value: i,\\n                disabled: false,\\n                key: `key-${i}`,\\n            })),\\n        };\\n        this.renderSourcePanel = this.renderSourcePanel.bind(this);\\n        this.renderSelectedPanel = this.renderSelectedPanel.bind(this);\\n        this.renderItem = this.renderItem.bind(this);\\n    }\\n\\n    renderItem(type, item, onItemAction, selectedItems) {\\n        let buttonText = '\\u5220\\u9664';\\n        if (type === 'source') {\\n            let checked = selectedItems.has(item.key);\\n            buttonText = checked ? '\\u5220\\u9664' : '\\u6DFB\\u52A0';\\n        }\\n        return (\\n            <div className=\\\"semi-transfer-item panel-item\\\" key={item.label}>\\n                <p>{item.label}</p>\\n                <Button\\n                    theme=\\\"borderless\\\"\\n                    type=\\\"primary\\\"\\n                    onClick={() => onItemAction(item)}\\n                    className=\\\"panel-item-remove\\\"\\n                    size=\\\"small\\\"\\n                >\\n                    {buttonText}\\n                </Button>\\n            </div>\\n        );\\n    }\\n\\n    renderSourcePanel(props) {\\n        const {\\n            loading,\\n            noMatch,\\n            filterData,\\n            selectedItems,\\n            allChecked,\\n            onAllClick,\\n            inputValue,\\n            onSearch,\\n            onSelectOrRemove,\\n        } = props;\\n        let content;\\n        switch (true) {\\n            case loading:\\n                content = <Spin loading />;\\n                break;\\n            case noMatch:\\n                content = <div className=\\\"empty sp-font\\\">{inputValue ? '\\u65E0\\u641C\\u7D22\\u7ED3\\u679C' : '\\u6682\\u65E0\\u5185\\u5BB9'}</div>;\\n                break;\\n            case !noMatch:\\n                content = filterData.map(item => this.renderItem('source', item, onSelectOrRemove, selectedItems));\\n                break;\\n            default:\\n                content = null;\\n                break;\\n        }\\n        return (\\n            <section className=\\\"source-panel\\\">\\n                <div className=\\\"panel-header sp-font\\\">\\u95E8\\u5E97\\u5217\\u8868</div>\\n                <div className=\\\"panel-main\\\">\\n                    <Input\\n                        style={{ width: 454, margin: '12px 14px' }}\\n                        prefix={<IconSearch />}\\n                        onChange={onSearch}\\n                        showClear\\n                    />\\n                    <div className=\\\"panel-controls sp-font\\\">\\n                        <span>\\u5F85\\u9009\\u95E8\\u5E97: {filterData.length}</span>\\n                        <Button onClick={onAllClick} theme=\\\"borderless\\\" size=\\\"small\\\">\\n                            {allChecked ? '\\u53D6\\u6D88\\u5168\\u9009' : '\\u5168\\u9009'}\\n                        </Button>\\n                    </div>\\n                    <div className=\\\"panel-list\\\">{content}</div>\\n                </div>\\n            </section>\\n        );\\n    }\\n\\n    renderSelectedPanel(props) {\\n        const { selectedData, onClear, clearText, onRemove } = props;\\n\\n        let mainContent = selectedData.map(item => this.renderItem('selected', item, onRemove));\\n\\n        if (!selectedData.length) {\\n            mainContent = <div className=\\\"empty sp-font\\\">\\u6682\\u65E0\\u6570\\u636E\\uFF0C\\u8BF7\\u4ECE\\u5DE6\\u4FA7\\u7B5B\\u9009</div>;\\n        }\\n\\n        return (\\n            <section className=\\\"selected-panel\\\">\\n                <div className=\\\"panel-header sp-font\\\">\\n                    <div>\\u5DF2\\u9009\\u540C\\u6B65\\u95E8\\u5E97: {selectedData.length}</div>\\n                    <Button theme=\\\"borderless\\\" type=\\\"primary\\\" onClick={onClear} size=\\\"small\\\">\\n                        {clearText || '\\u6E05\\u7A7A '}\\n                    </Button>\\n                </div>\\n                <div className=\\\"panel-main\\\">{mainContent}</div>\\n            </section>\\n        );\\n    }\\n\\n    render() {\\n        const { dataSource } = this.state;\\n        return (\\n            <Transfer\\n                onChange={values => console.log(values)}\\n                className=\\\"component-transfer-demo-custom-panel\\\"\\n                renderSourcePanel={this.renderSourcePanel}\\n                renderSelectedPanel={this.renderSelectedPanel}\\n                dataSource={dataSource}\\n            />\\n        );\\n    }\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \".component-transfer-demo-custom-panel {\\n\\n    .sp-font {\\n        color: rgba(var(--semi-grey-9), 1);\\n        font-size: 12px;\\n        font-weight: 500;\\n        line-height: 20px;\\n    }\\n\\n    .empty {\\n        width: 100%;\\n        height: 100%;\\n        display: flex;\\n        align-items: center;\\n        justify-content: center;\\n    }\\n\\n    .panel-item {\\n        flex-shrink: 0;\\n        height: 56px;\\n        border-radius: 4px;\\n        padding: 8px 12px;\\n        flex-wrap: wrap;\\n        background-color: rgba(22, 24, 35, .03);\\n\\n        &-main {\\n            flex-grow: 1;\\n        }\\n\\n        p {\\n            margin: 0 12px;\\n            flex-basis: 100%;\\n        }\\n\\n        .panel-item-remove {\\n            cursor: pointer;\\n            color: var(--semi-color-primary);\\n        }\\n    }\\n\\n    .panel-header {\\n        padding: 10px 12px;\\n        border: 1px solid rgba(22, 24, 35, .16);\\n        border-radius: 4px 4px 0 0;\\n        height: 38px;\\n        box-sizing: border-box;\\n        background-color: var(--semi-color-tertiary-light-default);\\n        display: flex;\\n        align-items: center;\\n        justify-content: space-between;\\n\\n        .clear {\\n            cursor: pointer;\\n            color: var(--semi-color-primary);\\n        }\\n    }\\n\\n    .source-panel {\\n        display: flex;\\n        flex-direction: column;\\n        width: 482px;\\n        height: 353px;\\n\\n        .panel-main {\\n            border: 1px solid var(--semi-color-border);\\n            border-top: none;\\n\\n            .panel-list {\\n                display: flex;\\n                flex-wrap: wrap;\\n                row-gap: 8px;\\n                column-gap: 8px;\\n                overflow-y: auto;\\n                height: 214px;\\n                margin-left: 12px;\\n                margin-right: 12px;\\n                padding-bottom: 8px;\\n            }\\n        }\\n\\n        .panel-controls {\\n            margin: 10px 12px;\\n            font-size: 12px;\\n            line-height: 20px;\\n\\n            .semi-button {\\n                margin-left: 8px;\\n                font-size: 12px;\\n            }\\n        }\\n\\n        .panel-item {\\n            width: 176px;\\n        }\\n\\n        margin-right: 16px;\\n    }\\n\\n    .selected-panel {\\n        width: 200px;\\n        height: 353px;\\n\\n        .panel-main {\\n            display: flex;\\n            flex-direction: column;\\n            overflow-y: auto;\\n            padding: 12px;\\n            border: 1px solid var(--semi-color-border);\\n            border-top: none;\\n            height: 323px;\\n            box-sizing: border-box;\\n            row-gap: 8px;\\n        }\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3 \\u3001 \\u62D6\\u62FD\\u6392\\u5E8F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u7684\\u573A\\u666F\\u4E0B\\uFF0C\\u7531\\u4E8E\\u62D6\\u62FD\\u533A\\u7684\\u6E32\\u67D3\\u4E5F\\u5DF2\\u7531\\u4F60\\u5B8C\\u5168\\u63A5\\u7BA1\\uFF0C\\u56E0\\u6B64\\u4F60\\u4E0D\\u58F0\\u660E draggable \\u4EA6\\u53EF\\u3002\\n\\u4F46\\u4F60\\u9700\\u8981\\u81EA\\u884C\\u5B9E\\u73B0\\u62D6\\u62FD\\u903B\\u8F91\\uFF0C\\u4F60\\u53EF\\u4EE5\\u501F\\u52A9\\u793E\\u533A\\u4E2D\\u62D6\\u62FD\\u7C7B\\u5DE5\\u5177\\u5E93 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/clauderic/dnd-kit\"\n  }, \"dnd-kit\"), \" \\u6216\\u8005 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/clauderic/react-sortable-hoc\"\n  }, \"react-sortable-hoc\"), \"\\uFF0C\\u5FEB\\u901F\\u5B9E\\u73B0\\u529F\\u80FD\\u3002\\u5173\\u4E8E\\u4E24\\u8005\\u9009\\u578B\\uFF0C\\u8FD9\\u662F\\u6211\\u4EEC\\u7684\\u4E00\\u4E9B\\u5EFA\\u8BAE\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E24\\u8005\\u5747\\u7531\\u540C\\u4E00\\u4F5C\\u8005\\u7EF4\\u62A4\\uFF0C dnd-kit \\u662F react-sortable-hoc \\u7684\\u63A5\\u4EFB\\u4EA7\\u54C1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"react-sortable-hoc \\u7684 API \\u8BBE\\u8BA1\\u66F4\\u52A0\\u9AD8\\u5185\\u805A\\uFF0C\\u5728\\u7B80\\u5355\\u573A\\u666F\\u4E0A\\u4EE3\\u7801\\u66F4\\u52A0\\u7B80\\u6D01\\u3002\\u4F46\\u5B83\\u5F3A\\u4F9D\\u8D56\\u4E86 findDOMNode API\\uFF0C\\u5728\\u672A\\u6765\\u7684 React \\u7248\\u672C\\u4E2D\\u4F1A\\u88AB\\u5E9F\\u5F03\\u3002\\u540C\\u65F6\\u8BE5\\u5E93\\u6700\\u8FD1\\u4E24\\u5E74\\u5DF2\\u7ECF\\u5904\\u4E8E\\u4E0D\\u7EF4\\u62A4\\u7684\\u72B6\\u6001\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"dnd-kit \\u76F8\\u5BF9\\u800C\\u8A00\\uFF0C\\u6709\\u4E00\\u5B9A\\u4E0A\\u624B\\u95E8\\u69DB\\uFF0C\\u4F46\\u5B83\\u7684\\u81EA\\u7531\\u5EA6\\u66F4\\u9AD8\\uFF0C\\u6269\\u5C55\\u6027\\u66F4\\u5F3A\\uFF0C\\u5E76\\u4E14\\u4ECD\\u5904\\u4E8E\\u7EF4\\u62A4\\u72B6\\u6001\\u3002\\u6211\\u4EEC\\u66F4\\u63A8\\u8350\\u4F7F\\u7528\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u66F4\\u591A DIff \\u4FE1\\u606F\\u53EF\\u67E5\\u9605 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/clauderic/react-sortable-hoc\"\n  }, \"react-sortable-hoc\"), \" \\u7684 Github \\u4E3B\\u9875\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53E6\\u5916\\uFF0C\\u8981\\u652F\\u6301\\u62D6\\u62FD\\u6392\\u5E8F\\uFF0C\\u4F60\\u9700\\u8981\\u5728\\u62D6\\u62FD\\u6392\\u5E8F\\u7ED3\\u675F\\u540E\\uFF0C\\u5C06 oldIndex\\u3001newIndex \\u4F5C\\u4E3A\\u5165\\u53C2\\uFF0C\\u8C03\\u7528 onSortEnd\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 react-sortable-hoc \\u7684\\u793A\\u4F8B\\uFF1A\"), 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 from 'react';\\nimport { SortableContainer, SortableElement, sortableHandle } from 'react-sortable-hoc';\\nimport { Transfer, Button, Spin, Input } from '@douyinfe/semi-ui';\\nimport { IconHandle, IconSearch } from '@douyinfe/semi-icons';\\n\\nclass CustomRenderDragDemo extends React.Component {\\n    constructor(props) {\\n        super(props);\\n        this.state = {\\n            dataSource: Array.from({ length: 100 }, (v, i) => ({\\n                label: `\\u6D77\\u5E95\\u635E\\u95E8\\u5E97 ${i}`,\\n                value: i,\\n                disabled: false,\\n                key: `key-${i}`,\\n            })),\\n        };\\n        this.renderSourcePanel = this.renderSourcePanel.bind(this);\\n        this.renderSelectedPanel = this.renderSelectedPanel.bind(this);\\n        this.renderItem = this.renderItem.bind(this);\\n    }\\n\\n    renderItem(type, item, onItemAction, selectedItems) {\\n        let buttonText = '\\u5220\\u9664';\\n        let newItem = item;\\n\\n        if (type === 'source') {\\n            let checked = selectedItems.has(item.key);\\n            buttonText = checked ? '\\u5220\\u9664' : '\\u6DFB\\u52A0';\\n        } else {\\n            // delete newItem._optionKey;\\n            newItem = { ...item, key: item._optionKey };\\n            delete newItem._optionKey;\\n        }\\n\\n        const DragHandle = sortableHandle(() => <IconHandle className=\\\"pane-item-drag-handler\\\" />);\\n\\n        return (\\n            <div className=\\\"semi-transfer-item panel-item\\\" key={item.label}>\\n                {type === 'source' ? null : <DragHandle />}\\n                <div className=\\\"panel-item-main\\\" style={{ flexGrow: 1 }}>\\n                    <p>{item.label}</p>\\n                    <Button\\n                        theme=\\\"borderless\\\"\\n                        type=\\\"primary\\\"\\n                        onClick={() => onItemAction(newItem)}\\n                        className=\\\"panel-item-remove\\\"\\n                        size=\\\"small\\\"\\n                    >\\n                        {buttonText}\\n                    </Button>\\n                </div>\\n            </div>\\n        );\\n    }\\n\\n    renderSourcePanel(props) {\\n        const {\\n            loading,\\n            noMatch,\\n            filterData,\\n            selectedItems,\\n            allChecked,\\n            onAllClick,\\n            inputValue,\\n            onSearch,\\n            onSelectOrRemove,\\n        } = props;\\n        let content;\\n        switch (true) {\\n            case loading:\\n                content = <Spin loading />;\\n                break;\\n            case noMatch:\\n                content = <div className=\\\"empty sp-font\\\">{inputValue ? '\\u65E0\\u641C\\u7D22\\u7ED3\\u679C' : '\\u6682\\u65E0\\u5185\\u5BB9'}</div>;\\n                break;\\n            case !noMatch:\\n                content = filterData.map(item => this.renderItem('source', item, onSelectOrRemove, selectedItems));\\n                break;\\n            default:\\n                content = null;\\n                break;\\n        }\\n        return (\\n            <section className=\\\"source-panel\\\">\\n                <div className=\\\"panel-header sp-font\\\">\\u95E8\\u5E97\\u5217\\u8868</div>\\n                <div className=\\\"panel-main\\\">\\n                    <Input\\n                        style={{ width: 454, margin: '12px 14px' }}\\n                        prefix={<IconSearch />}\\n                        onChange={onSearch}\\n                        showClear\\n                    />\\n                    <div className=\\\"panel-controls sp-font\\\">\\n                        <span>\\u5F85\\u9009\\u95E8\\u5E97: {filterData.length}</span>\\n                        <Button onClick={onAllClick} theme=\\\"borderless\\\" size=\\\"small\\\">\\n                            {allChecked ? '\\u53D6\\u6D88\\u5168\\u9009' : '\\u5168\\u9009'}\\n                        </Button>\\n                    </div>\\n                    <div className=\\\"panel-list\\\">{content}</div>\\n                </div>\\n            </section>\\n        );\\n    }\\n\\n    renderSelectedPanel(props) {\\n        const { selectedData, onClear, clearText, onRemove, onSortEnd } = props;\\n\\n        let mainContent = null;\\n\\n        if (!selectedData.length) {\\n            mainContent = <div className=\\\"empty sp-font\\\">\\u6682\\u65E0\\u6570\\u636E\\uFF0C\\u8BF7\\u4ECE\\u5DE6\\u4FA7\\u7B5B\\u9009</div>;\\n        }\\n\\n        const SortableItem = SortableElement(item => this.renderItem('selected', item, onRemove));\\n        const SortableList = SortableContainer(\\n            ({ items }) => {\\n                return (\\n                    <div className=\\\"panel-main\\\">\\n                        {items.map((item, index) => (\\n                            // sortableElement will take over the property 'key', so use another '_optionKey' to pass\\n                            // otherwise you can't get `key` property in this.renderItem\\n                            <SortableItem key={item.label} index={index} {...item} _optionKey={item.key}></SortableItem>\\n                        ))}\\n                    </div>\\n                );\\n            },\\n            { distance: 10 }\\n        );\\n\\n        mainContent = <SortableList useDragHandle onSortEnd={onSortEnd} items={selectedData}></SortableList>;\\n\\n        return (\\n            <section className=\\\"selected-panel\\\">\\n                <div className=\\\"panel-header sp-font\\\">\\n                    <div>\\u5DF2\\u9009\\u540C\\u6B65\\u95E8\\u5E97: {selectedData.length}</div>\\n                    <Button theme=\\\"borderless\\\" type=\\\"primary\\\" onClick={onClear} size=\\\"small\\\">\\n                        {clearText || '\\u6E05\\u7A7A '}\\n                    </Button>\\n                </div>\\n                {mainContent}\\n            </section>\\n        );\\n    }\\n\\n    render() {\\n        const { dataSource } = this.state;\\n        return (\\n            <Transfer\\n                defaultValue={[2, 4]}\\n                onChange={values => console.log(values)}\\n                className=\\\"component-transfer-demo-custom-panel\\\"\\n                renderSourcePanel={this.renderSourcePanel}\\n                renderSelectedPanel={this.renderSelectedPanel}\\n                dataSource={dataSource}\\n            />\\n        );\\n    }\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 dnd-kit \\u7684\\u793A\\u4F8B\\u5982\\u4E0B\\uFF0C\\u9700\\u8981\\u7528\\u5230\\u7684\\u6838\\u5FC3\\u4F9D\\u8D56\\u6709 @dnd-kit/sortable\\uFF0C @dnd-kit/core\\uFF0C\\u5176\\u4E2D\\u6838\\u5FC3 hooks \\u4E3A useSortable\\uFF0C\\u4F7F\\u7528\\u8BF4\\u660E\\u5982\\u4E0B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"1. \\u4F5C\\u7528\\uFF1A\\u901A\\u8FC7\\u552F\\u4E00\\u6807\\u5FD7 id \\u83B7\\u53D6\\u62D6\\u62FD\\u8FC7\\u7A0B\\u4E2D\\u5FC5\\u8981\\u4FE1\\u606F\\n2. \\u6838\\u5FC3\\u8F93\\u5165\\u53C2\\u6570\\uFF1A\\n    - id: \\u552F\\u4E00\\u6807\\u8BC6, \\u4EE5\\u4E3A\\u6570\\u5B57\\u6216\\u8005\\u5B57\\u7B26\\u4E32\\uFF0C\\u4F46\\u662F\\u4E0D\\u80FD\\u4E3A\\u6570\\u5B57 0\\n3. \\u6838\\u5FC3\\u8FD4\\u56DE\\u503C\\u8BF4\\u660E:\\n    - setNodeRef: \\u5173\\u8054 dom \\u8282\\u70B9\\uFF0C\\u4F7F\\u5176\\u6210\\u4E3A\\u4E00\\u4E2A\\u53EF\\u62D6\\u62FD\\u7684\\u9879\\n    - listeners: \\u5305\\u542B onKeyDown\\uFF0ConPointerDown \\u7B49\\u65B9\\u6CD5\\uFF0C\\u4E3B\\u8981\\u8BA9\\u8282\\u70B9\\u53EF\\u4EE5\\u8FDB\\u884C\\u62D6\\u62FD\\n    - transform\\uFF1A\\u8BE5\\u8282\\u70B9\\u88AB\\u62D6\\u52A8\\u65F6\\u5019\\u7684\\u79FB\\u52A8\\u53D8\\u5316\\u503C\\n    - transition\\uFF1A\\u8FC7\\u6E21\\u6548\\u679C\\n    - active: \\u88AB\\u62D6\\u62FD\\u8282\\u70B9\\u7684\\u76F8\\u5173\\u4FE1\\u606F\\uFF0C\\u5305\\u62EC id\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Transfer, Input, Spin, Button } from '@douyinfe/semi-ui';\\nimport { IconSearch, IconHandle } from '@douyinfe/semi-icons';\\nimport { useSortable, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';\\nimport { CSS as cssDndKit } from '@dnd-kit/utilities';\\nimport { closestCenter, DragOverlay, DndContext, MouseSensor, TouchSensor, useSensor, useSensors, KeyboardSensor, TraversalOrder } from '@dnd-kit/core';\\n\\nfunction SortableList({\\n    items,\\n    onSortEnd,\\n    renderItem,\\n}) {\\n    const [activeId, setActiveId] = useState(null);\\n    // sensors \\u786E\\u5B9A\\u62D6\\u62FD\\u64CD\\u4F5C\\u53D7\\u54EA\\u4E9B\\u5916\\u90E8\\u8F93\\u5165\\u5F71\\u54CD\\uFF08\\u5982\\u9F20\\u6807\\uFF0C\\u952E\\u76D8\\uFF0C\\u89E6\\u6478\\u677F\\uFF09\\n    const sensors = useSensors(\\n        useSensor(MouseSensor),\\n        useSensor(TouchSensor),\\n        useSensor(KeyboardSensor, {\\n            coordinateGetter: sortableKeyboardCoordinates,\\n        })\\n    );\\n    const getIndex = useCallback((id) => items.indexOf(id), [items]);\\n    const activeIndex = useMemo(() => activeId ? getIndex(activeId) : -1, [getIndex, activeId]);\\n\\n    const onDragStart = useCallback(({ active }) => {\\n        if (!active) { return; }\\n        setActiveId(active.id);\\n    }, []);\\n\\n    // \\u62D6\\u62FD\\u7ED3\\u675F\\u56DE\\u8C03\\n    const onDragEnd = useCallback(({ over }) => {\\n        setActiveId(null);\\n        if (over) {\\n            const overIndex = getIndex(over.id);\\n            if (activeIndex !== overIndex) {\\n                onSortEnd({ oldIndex: activeIndex, newIndex: overIndex });\\n            }\\n        }\\n    }, [activeIndex, getIndex, onSortEnd]);\\n\\n    const onDragCancel = useCallback(() => {\\n        setActiveId(null);\\n    }, []);\\n\\n    return (\\n        <DndContext\\n            sensors={sensors}\\n            collisionDetection={closestCenter}\\n            onDragStart={onDragStart}\\n            onDragEnd={onDragEnd}\\n            onDragCancel={onDragCancel}\\n            // \\u8BBE\\u7F6E\\u62D6\\u62FD\\u65F6\\u5019\\u6EDA\\u52A8\\u4ECE\\u6700\\u9760\\u8FD1\\u88AB\\u62D6\\u62FD\\u5143\\u7D20\\u7684\\u7956\\u5148\\u5143\\u7D20\\u5F00\\u59CB\\n            autoScroll={{ order: TraversalOrder.ReversedTreeOrder }}\\n        >\\n            <SortableContext items={items} strategy={verticalListSortingStrategy}>\\n                <div style={{ overflow: 'auto', display: 'flex', flexDirection: 'column', rowGap: '8px' }}>\\n                    {items.map((value, index) => (\\n                        <SortableItem\\n                            key={value}\\n                            id={value}\\n                            index={index}\\n                            renderItem={renderItem}\\n                        />\\n                    ))}\\n                </div>\\n                {ReactDOM.createPortal(\\n                    <DragOverlay>\\n                        {activeId ? (\\n                            renderItem({\\n                                id: activeId,\\n                                sortableHandle: (WrapperComponent) => WrapperComponent\\n                            })\\n                        ) : null}\\n                    </DragOverlay>,\\n                    document.body\\n                )}\\n            </SortableContext>\\n        </DndContext>\\n    );\\n}\\n\\nfunction SortableItem({ id, renderItem }) {\\n    const {\\n        listeners,\\n        setNodeRef,\\n        transform,\\n        transition,\\n        active,\\n    } = useSortable({\\n        id,\\n    });\\n\\n    const sortableHandle = useCallback((WrapperComponent) => {\\n        return () => <span {...listeners} style={{ lineHeight: 0 }}><WrapperComponent /></span>;\\n    }, [listeners]);\\n\\n    const wrapperStyle = {\\n        transform: cssDndKit.Transform.toString({\\n            ...transform,\\n            scaleX: 1,\\n            scaleY: 1,\\n        }),\\n        transition: transition,\\n        opacity: active && active.id === id ? 0 : undefined,\\n    };\\n\\n    return <div \\n        ref={setNodeRef}\\n        style={wrapperStyle}\\n    >\\n        {renderItem({ id, sortableHandle })}\\n    </div>;\\n}\\n\\nclass CustomRenderDragDemo extends React.Component {\\n    constructor(props) {\\n        super(props);\\n        this.state = {\\n            dataSource: Array.from({ length: 100 }, (v, i) => ({\\n                label: `\\u6D77\\u5E95\\u635E\\u95E8\\u5E97 ${i}`,\\n                value: i,\\n                disabled: false,\\n                key: `key-${i}`,\\n            })),\\n        };\\n        this.renderSourcePanel = this.renderSourcePanel.bind(this);\\n        this.renderSelectedPanel = this.renderSelectedPanel.bind(this);\\n        this.renderItem = this.renderItem.bind(this);\\n    }\\n\\n    renderItem(type, item, onItemAction, selectedItems, sortableHandle) {\\n        let buttonText = '\\u5220\\u9664';\\n\\n        if (type === 'source') {\\n            let checked = selectedItems.has(item.key);\\n            buttonText = checked ? '\\u5220\\u9664' : '\\u6DFB\\u52A0';\\n        }\\n\\n        const DragHandle = (sortableHandle && sortableHandle(() => <IconHandle className=\\\"pane-item-drag-handler\\\" />));\\n\\n        return (\\n            <div className=\\\"semi-transfer-item panel-item\\\" key={item.label}>\\n                {type === 'source' ? null : ( DragHandle ? <DragHandle /> : null) }\\n                <div className=\\\"panel-item-main\\\" style={{ flexGrow: 1 }}>\\n                    <p style={{ margin: '0 12px' }}>{item.label}</p>\\n                    <Button\\n                        theme=\\\"borderless\\\"\\n                        type=\\\"primary\\\"\\n                        onClick={() => onItemAction(item)}\\n                        className=\\\"panel-item-remove\\\"\\n                        size=\\\"small\\\"\\n                    >\\n                        {buttonText}\\n                    </Button>\\n                </div>\\n            </div>\\n        );\\n    }\\n\\n    renderSourcePanel(props) {\\n        const {\\n            loading,\\n            noMatch,\\n            filterData,\\n            selectedItems,\\n            allChecked,\\n            onAllClick,\\n            inputValue,\\n            onSearch,\\n            onSelectOrRemove,\\n        } = props;\\n        let content;\\n        switch (true) {\\n            case loading:\\n                content = <Spin loading />;\\n                break;\\n            case noMatch:\\n                content = <div className=\\\"empty sp-font\\\">{inputValue ? '\\u65E0\\u641C\\u7D22\\u7ED3\\u679C' : '\\u6682\\u65E0\\u5185\\u5BB9'}</div>;\\n                break;\\n            case !noMatch:\\n                content = filterData.map(item => this.renderItem('source', item, onSelectOrRemove, selectedItems));\\n                break;\\n            default:\\n                content = null;\\n                break;\\n        }\\n        return (\\n            <section className=\\\"source-panel\\\">\\n                <div className=\\\"panel-header sp-font\\\">\\u95E8\\u5E97\\u5217\\u8868</div>\\n                <div className=\\\"panel-main\\\">\\n                    <Input\\n                        style={{ width: 454, margin: '12px 14px' }}\\n                        prefix={<IconSearch />}\\n                        onChange={onSearch}\\n                        showClear\\n                    />\\n                    <div className=\\\"panel-controls sp-font\\\">\\n                        <span>\\u5F85\\u9009\\u95E8\\u5E97: {filterData.length}</span>\\n                        <Button onClick={onAllClick} theme=\\\"borderless\\\" size=\\\"small\\\">\\n                            {allChecked ? '\\u53D6\\u6D88\\u5168\\u9009' : '\\u5168\\u9009'}\\n                        </Button>\\n                    </div>\\n                    <div className=\\\"panel-list\\\">{content}</div>\\n                </div>\\n            </section>\\n        );\\n    }\\n\\n    renderSelectedPanel(props) {\\n        const { selectedData, onClear, clearText, onRemove, onSortEnd } = props;\\n        let mainContent = null;\\n\\n        if (!selectedData.length) {\\n            mainContent = <div className=\\\"empty sp-font\\\">\\u6682\\u65E0\\u6570\\u636E\\uFF0C\\u8BF7\\u4ECE\\u5DE6\\u4FA7\\u7B5B\\u9009</div>;\\n        }\\n\\n        const renderSelectItem = ({ id, sortableHandle }) => {\\n            const item = selectedData.find(item => id === item.key);\\n            return this.renderItem('selected', item, onRemove, null, sortableHandle);\\n        };\\n\\n        const sortData = selectedData.map(item => item.key);\\n\\n        mainContent = <div className=\\\"panel-main\\\" style={{ display: 'block' }}>\\n            <SortableList onSortEnd={onSortEnd} items={sortData} renderItem={renderSelectItem}></SortableList>\\n        </div>;\\n\\n        return (\\n            <section className=\\\"selected-panel\\\">\\n                <div className=\\\"panel-header sp-font\\\">\\n                    <div>\\u5DF2\\u9009\\u540C\\u6B65\\u95E8\\u5E97: {selectedData.length}</div>\\n                    <Button theme=\\\"borderless\\\" type=\\\"primary\\\" onClick={onClear} size=\\\"small\\\">\\n                        {clearText || '\\u6E05\\u7A7A '}\\n                    </Button>\\n                </div>\\n                {mainContent}\\n            </section>\\n        );\\n    }\\n\\n    render() {\\n        const { dataSource } = this.state;\\n        return (\\n            <Transfer\\n                defaultValue={[2, 4]}\\n                onChange={values => console.log(values)}\\n                className=\\\"component-transfer-demo-custom-panel\\\"\\n                renderSourcePanel={this.renderSourcePanel}\\n                renderSelectedPanel={this.renderSelectedPanel}\\n                dataSource={dataSource}\\n            />\\n        );\\n    }\\n}\\n\\nrender(CustomRenderDragDemo);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6811\\u7A7F\\u68AD\\u6846\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F20\\u5165 type \\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeList\"), \"\\uFF0C\\u4F7F\\u7528\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/navigation/tree\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"Tree\")), \"\\u7EC4\\u4EF6\\u4F5C\\u4E3A\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5217\\u8868\\u3002\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"v1.20.0 \\u63D0\\u4F9B\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7treeProps(\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/navigation/tree#Tree\"\n  }, \"TreeProps\"), \")\\u6765\\u8986\\u76D6\\u9ED8\\u8BA4\\u6811\\u7684\\u5C5E\\u6027\\uFF0C\\u5DE6\\u4FA7\\u6811\\u9ED8\\u8BA4\\u5C5E\\u6027\\u4E3A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"{\\n    multiple:true,\\n    disableStrictly:true,\\n    leafOnly:true,\\n    filterTreeNode:true,\\n    searchRender:flase,\\n\\n}\\n\")), 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 { Transfer } 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                    label: 'Mexico',\\n                    value: 'Mexico',\\n                    disabled: true,\\n                    key: '1-2',\\n                },\\n                {\\n                    label: 'Cuba',\\n                    value: 'Cuba',\\n                    key: '1-3',\\n                },\\n            ],\\n        },\\n    ];\\n\\n    const [v, $v] = useState(['Shanghai']);\\n\\n    return (\\n        <div style={{ margin: 10, padding: 10, width: 600 }}>\\n            <Transfer dataSource={treeData} type=\\\"treeList\\\" value={v} onChange={$v}></Transfer>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6811\\u7A7F\\u68AD\\u6846\\u81EA\\u5B9A\\u4E49\\u5934\\u90E8\\u663E\\u793A\\u53F6\\u5B50\\u8282\\u70B9\\u6570\\u91CF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53 type \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"treeList\"), \" \\u65F6\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSourceHeader\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"SourceHeaderProps\"), \" \\u53C2\\u6570\\u4E2D\\u4F1A\\u989D\\u5916\\u63D0\\u4F9B \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leafOnlyNum\"), \" \\u5B57\\u6BB5\\uFF0C\\u8868\\u793A\\u53F6\\u5B50\\u8282\\u70B9\\u7684\\u6570\\u91CF\\u3002\\u8FD9\\u5728\\u6587\\u4EF6\\u9009\\u62E9\\u7B49\\u573A\\u666F\\u4E2D\\u975E\\u5E38\\u6709\\u7528\\uFF0C\\u53EF\\u4EE5\\u5728\\u5934\\u90E8\\u53EA\\u663E\\u793A\\u6587\\u4EF6\\u6570\\u91CF\\u800C\\u4E0D\\u662F\\u5305\\u542B\\u6587\\u4EF6\\u5939\\u7684\\u603B\\u6570\\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 { Transfer, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const treeData = [\\n        {\\n            label: '\\u6587\\u4EF6\\u5939 1',\\n            value: 'folder1',\\n            key: 'folder1',\\n            children: [\\n                {\\n                    label: '\\u6587\\u4EF6 1-1',\\n                    value: 'file1-1',\\n                    key: 'file1-1',\\n                },\\n                {\\n                    label: '\\u6587\\u4EF6 1-2',\\n                    value: 'file1-2',\\n                    key: 'file1-2',\\n                },\\n                {\\n                    label: '\\u5B50\\u6587\\u4EF6\\u5939 1',\\n                    value: 'subfolder1',\\n                    key: 'subfolder1',\\n                    children: [\\n                        {\\n                            label: '\\u6587\\u4EF6 1-1-1',\\n                            value: 'file1-1-1',\\n                            key: 'file1-1-1',\\n                        },\\n                        {\\n                            label: '\\u6587\\u4EF6 1-1-2',\\n                            value: 'file1-1-2',\\n                            key: 'file1-1-2',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u6587\\u4EF6\\u5939 2',\\n            value: 'folder2',\\n            key: 'folder2',\\n            children: [\\n                {\\n                    label: '\\u6587\\u4EF6 2-1',\\n                    value: 'file2-1',\\n                    key: 'file2-1',\\n                },\\n                {\\n                    label: '\\u6587\\u4EF6 2-2',\\n                    value: 'file2-2',\\n                    key: 'file2-2',\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u72EC\\u7ACB\\u6587\\u4EF6',\\n            value: 'file3',\\n            key: 'file3',\\n        },\\n    ];\\n\\n    const [value, setValue] = useState([]);\\n\\n    const renderSourceHeader = (props) => {\\n        const { num, leafOnlyNum, showButton, allChecked, onAllClick } = props;\\n        \\n        return (\\n            <div style={{ \\n                display: 'flex', \\n                justifyContent: 'space-between', \\n                alignItems: 'center',\\n                padding: '8px 12px',\\n                borderBottom: '1px solid var(--semi-color-border)'\\n            }}>\\n                <span>\\n                    <strong>\\u6587\\u4EF6\\u603B\\u6570\\uFF1A</strong>\\n                    {leafOnlyNum !== undefined ? leafOnlyNum : num} \\u4E2A\\u6587\\u4EF6\\n                    {leafOnlyNum !== undefined && (\\n                        <span style={{ color: 'var(--semi-color-text-2)', marginLeft: 8, fontSize: 12 }}>\\n                            \\uFF08\\u603B\\u8282\\u70B9\\u6570\\uFF1A{num}\\uFF09\\n                        </span>\\n                    )}\\n                </span>\\n                {showButton && (\\n                    <Button\\n                        theme=\\\"borderless\\\"\\n                        type=\\\"tertiary\\\"\\n                        size=\\\"small\\\"\\n                        onClick={onAllClick}\\n                    >\\n                        {allChecked ? '\\u53D6\\u6D88\\u5168\\u9009' : '\\u5168\\u9009'}\\n                    </Button>\\n                )}\\n            </div>\\n        );\\n    };\\n\\n    return (\\n        <Transfer\\n            style={{ width: 600 }}\\n            dataSource={treeData}\\n            type=\\\"treeList\\\"\\n            value={value}\\n            onChange={setValue}\\n            renderSourceHeader={renderSourceHeader}\\n        />\\n    );\\n};\\n\"))), 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  }, \"\\u641C\\u7D22\\u6846\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"search\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53F3\\u4FA7\\u9009\\u4E2D\\u5217\\u8868\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"list\"), \"\\uFF0C\\u9009\\u4E2D\\u9879\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"listitem\")))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Transfer Props\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\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  }, \"dataSource\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6570\\u636E\\u6E90\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<Item\", \">\", \"|\", \"Array<GroupItem\", \">\", \"|\", \"Array<TreeItem\", \">\"), 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  }, \"\\u9ED8\\u8BA4\\u5DF2\\u9009\\u4E2D\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<string\", \"|\", \"number>\"), 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  }, \"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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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\\u5F00\\u542F\\u62D6\\u62FD\\u6392\\u5E8F\"), 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  }, \"emptyContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7A7A\\u72B6\\u6001\\u7684\\u63D0\\u793A\\u6587\\u672C\\uFF0Csearch \\u4E3A\\u65E0\\u641C\\u7D22\\u7ED3\\u679C\\u65F6\\u5C55\\u793A\\u7684\\u6587\\u672C\\uFF0Cleft \\u4E3A\\u5DE6\\u4FA7\\u65E0\\u6E90\\u6570\\u636E\\u65F6\\u7684\\u6587\\u672C\\uFF0Cright \\u4E3A\\u65E0\\u52FE\\u9009\\u6570\\u636E\\u65F6\\u7684\\u63D0\\u793A\\u6587\\u672C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{left: ReactNode; right: ReactNode; search: 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  }, \"filter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7B5B\\u9009\\u903B\\u8F91, \\u5F53\\u4E3A false \\u65F6\\uFF0C\\u4E0D\\u5C55\\u793A\\u641C\\u7D22\\u6846\\uFF0C\\u4F20\\u5165\\u51FD\\u6570\\u53EF\\u81EA\\u5B9A\\u4E49\\u641C\\u7D20\\u903B\\u8F91\\u3002\\u5F53 type \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeList\"), \"\\u65F6\\uFF0C\\u5982\\u9700\\u8981\\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u903B\\u8F91\\uFF0C\\u9700\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"filter\"), \" \\u4E3A true\\uFF0C\\u5E76\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeProps\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"filterTreeNode\"), \" \\u8BBE\\u7F6E\\u81EA\\u5B9A\\u4E49\\u7684\\u641C\\u7D22\\u51FD\\u6570\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" (input:string, item: Item) => 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  }, \"inputProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u6846 Input\\uFF0C\\u53EF\\u914D\\u7F6E\\u5C5E\\u6027\\u53C2\\u8003 Input \\u7EC4\\u4EF6\\uFF0C\\u5176\\u4E2D value \\u548C onChange \\u53C2\\u6570\\u5728 Transfer \\u5185\\u90E8\\u4F1A\\u88AB\\u4F7F\\u7528\\uFF0C\\u7528\\u6237\\u8BF7\\u52FF\\u4F7F\\u7528\\uFF0C\\u5982\\u9700\\u901A\\u8FC7\\u5916\\u90E8\\u6570\\u636E\\u8FDB\\u884C\\u641C\\u7D22\\uFF0C\\u53EF\\u8C03\\u7528 Transfer \\u7684 search \\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/input#API%20%E5%8F%82%E8%80%83\"\n  }, \"InputProps\")), 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  }, \"loading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u6B63\\u5728\\u52A0\\u8F7D\\u5DE6\\u4FA7\\u9009\\u9879\"), 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  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u4E2D\\u503C\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\u89E6\\u53D1\\u7684\\u56DE\\u8C03, \\u62D6\\u62FD\\u6392\\u5E8F\\u53D8\\u5316\\u540E\\u4E5F\\u4F1A\\u89E6\\u53D1\\u8BE5\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(values: Array<string\", \"|\", \"number>, items: Array<Item\", \">\", \") => 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  }, \"onDeselect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D6\\u6D88\\u52FE\\u9009\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(item: Item) => 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  }, \"onSearch\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u641C\\u7D22\\u6846\\u8F93\\u5165\\u5185\\u5BB9\\u53D8\\u5316\\u65F6\\u8C03\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(inputValue: 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  }, \"\\u52FE\\u9009\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(item: Item) => 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  }, \"renderSelectedHeader\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u53F3\\u4FA7\\u9762\\u677F\\u5934\\u90E8\\u4FE1\\u606F\\u7684\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: SelectedHeaderProps) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.29.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderSelectedItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u53F3\\u4FA7\\u5355\\u4E2A\\u5DF2\\u9009\\u9879\\u7684\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(item: { onRemove, sortableHandle } & Item) => 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  }, \"renderSelectedPanel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u53F3\\u4FA7\\u5DF2\\u9009\\u9762\\u677F\\u7684\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(selectedPanelProps) => 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  }, \"renderSourceHeader\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5DE6\\u4FA7\\u9762\\u677F\\u5934\\u90E8\\u4FE1\\u606F\\u7684\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: SourceHeaderProps) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.29.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderSourceItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5DE6\\u4FA7\\u5355\\u4E2A\\u5019\\u9009\\u9879\\u7684\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(item: { onChange, checked } & Item) => 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  }, \"renderSourcePanel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5DE6\\u4FA7\\u5019\\u9009\\u9762\\u677F\\u7684\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(sourcePanelProps) => 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  }, \"showPath\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53 type \\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeList\"), \"\\u65F6\\uFF0C\\u63A7\\u5236\\u53F3\\u4FA7\\u9009\\u4E2D\\u9879\\u662F\\u5426\\u663E\\u793A\\u9009\\u62E9\\u8DEF\\u5F84\"), 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\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  }, \"treeProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53 type \\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeList\"), \"\\u65F6\\uFF0C\\u53EF\\u4F5C\\u4E3A TreeProps \\u4F20\\u5165\\u5DE6\\u4FA7\\u7684 Tree \\u7EC4\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/navigation/tree#Tree\"\n  }, \"TreeProps\")), 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  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Transfer \\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"list\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"groupList\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"treeList\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'list'\"), 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  }, \"\\u5DF2\\u9009\\u4E2D\\u503C\\uFF0C\\u4F20\\u5165\\u8BE5\\u9879\\u65F6\\uFF0C\\u5C06\\u4F5C\\u4E3A\\u53D7\\u63A7\\u7EC4\\u4EF6\\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<string\", \"|\", \"number>\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Item Interface\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), 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  }, \"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  }, \"\\u5FC5\\u586B\\uFF0C\\u6BCF\\u4E2A\\u9009\\u9879\\u7684\\u552F\\u4E00\\u6807\\u8BC6\\uFF0C\\u4E0D\\u5141\\u8BB8\\u91CD\\u590D\"), 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  }, \"\\u9009\\u9879\\u5C55\\u793A\\u5185\\u5BB9\"), 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u9879\\u4EE3\\u8868\\u7684\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"GroupItem Interface\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"GroupItem\\u7EE7\\u627FItem\\u7684\\u6240\\u6709\\u5C5E\\u6027\"), 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  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u5206\\u7EC4\\u7684\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<Item\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5206\\u7EC4\\u540D\\u79F0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"TreeItem Interface\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"TreeItem \\u7EE7\\u627F Item \\u7684\\u6240\\u6709\\u5C5E\\u6027\"), 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  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B50\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<TreeItem\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), 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  }, \"Name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"search(value: string)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u901A\\u8FC7 ref \\u8C03\\u7528\\u8BE5\\u65B9\\u6CD5\\u8FDB\\u884C\\u641C\\u7D22\\uFF0C\\u8BE5\\u641C\\u7D22\\u503C\\u4F1A\\u88AB\\u7F6E\\u7ED9 Input\\u3002\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/input/transfer","next":{"fields":{"slug":"en-US/input/treeselect"},"id":"b77709f6-2eb0-550e-9967-e5b8ac68abac","frontmatter":{"title":"TreeSelect","localeCode":"en-US","icon":"doc-treeselect","showNew":null}},"previous":{"fields":{"slug":"en-US/input/transfer"},"id":"bf28b69c-f334-5862-80ff-710dc1566895","frontmatter":{"title":"Transfer","localeCode":"en-US","icon":"doc-transfer","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}