Transfer穿梭框是一种用于选择和管理数据的组件。用户可以从左侧列表选择项目移动到右侧列表，反之亦然。这种组件常用于多选场景，例如选择多个联系人或项目。
安装
首先，确保已经安装了 element-react 和相关依赖。如果尚未安装，可以通过以下命令进行安装：
npm install element-react --save
基本使用
引入 Transfer 组件
在需要使用 Transfer 组件的地方引入它：
import { Transfer } from 'element-react';最简单的 Transfer 示例
下面是一个最简单的 Transfer 使用示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - -------- - ---- ----------------
------ ------- ----- --- ------- --------- -
----- - -
--------- ---
---------- --
--
-------- -
------ -
---------
--------------- --------
--------------------------
---------------------------------
------------------------- ---------- ---------- -- -
--------------- ---------- ------------- ---
--
--
--
-
-在这个例子中，我们创建了一个最基础的 Transfer 组件，它有两个列表：一个源列表和一个目标列表。初始状态下，所有数据都在源列表中，用户可以将数据从源列表转移到目标列表。
数据格式
Transfer 组件的数据由两部分组成：data 和 targetKeys。data 是所有可用数据的数组，每个数据项应该是一个对象，包含以下属性：
key: 数据项的唯一标识符。label: 显示在列表中的文本。disabled: 可选参数，指定数据项是否为禁用状态。
targetKeys 是目标列表中已选定数据项的键值数组。
自定义渲染
你可以通过 render 属性来自定义列表项的显示方式：
<Transfer
...
render={(item) => `${item.label} - ${item.key}`}
/>可搜索性
Transfer 组件支持搜索功能，可以通过设置 filterable 属性来启用：
<Transfer
...
filterable
/>可排序性
默认情况下，Transfer 组件是可排序的。你可以通过 sortable 属性来控制这一行为：
<Transfer
...
sortable={false}
/>多级数据处理
如果你的数据是多层级结构，你可以通过 children 属性来指定子节点：
<Transfer
...
children={(item) => item.children}
/>动态更新数据
Transfer 组件支持动态更新数据。例如，当用户在左侧列表选择某个项目并点击“右移”按钮时，我们可以根据特定逻辑动态更新右侧列表的数据：
-- -------------------- ---- -------
--------------- - ------ -- -
-- -- ---- ---------
----- ------- - --------------------------
-----------------------
--------------- ---------- ------- ---
--
-------- -
------ -
---------
---
----------------------------------
--
--
-高级用法：分页
如果你的数据量非常大，可以考虑使用分页来提高性能。在这种情况下，你需要自己实现分页逻辑，并在每次页面变化时重新加载数据。
-- -------------------- ---- -------
-- -----------
----- --------- - ----- ------ -- -
-- --------
----- -------- - ----- ---------------------------------------------------
----- ---- - ----- ----------------
------ -----
--
----- --- ------- --------- -
----- - -
--------- ---
---------- ---
----- -
--
------------------- -
--------------------------------
-
--------- - ----- ------ -- -
----- ---- - ----- ----------------
--------------- --------- ---- ---
--
---------------- - ------ -- -
---------------------
--
-------- -
------ -
-----
---------
---
--------------------------
--
-----------
-------------------------
--------------------------------
--
------
--
-
-以上是关于 Element-React Transfer 组件的基本使用、配置以及一些高级用法。希望这些信息对你有所帮助！