数据穿梭框 Transfer

两栏布局的多选组件，将元素从一栏即时移到另一栏。

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

• 基础用法：两栏布局的多选穿梭框组件，将元素从一栏即时移到另一栏。
• 带搜索框：指定 showSearch 来使用带搜索框的穿梭框，可以自定义搜索函数。
• 单向模式：指定 oneWay 使用单向模式的穿梭框。
• 高级用法：穿梭框高级用法，可配置操作文案，可定制宽高。
• 分页：数据量大时，指定 pagination 来使用分页。
• 自定义渲染行数据：通过 render 自定义渲染每一个项目，可用于渲染复杂数据。
• 表格穿梭框：使用 Table 组件作为自定义渲染列表。
• 树穿梭框：使用 Tree 组件作为自定义渲染列表。
• 简单模式：指定 simple 来开启简单模式，点击选项即可移动。额外配置 simple = { retainSelectedItems: true }，将选中的条目保留在左侧。
• 拖拽排序：指定 draggable 属性为 true，可拖拽排序左右面板。
• 自定义标题栏：titleTexts 允许传入 render 函数以完全自定义 Transfer 的标题栏，函数接收的参数为 { countTotal: number; countSelected: number; checkbox: ReactNode; clear: () => void }。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

Transfer

TransferCustomListProps

export interface TransferCustomListProps
  extends Pick<
    TransferListProps,
    | "disabled"
    | "listType"
    | "selectedKeys"
    | "validKeys"
    | "selectedDisabledKeys"
  > {
  filteredItems: TransferItem[];
  onItemSelect: (key: string, selected: boolean) => void;
  onItemRemove: (key: string) => void;
  onItemSelectAll: (keys: string[], selected: boolean) => void;
}

TransferItem

export type TransferItem = {
  key: string;
  value: string;
  disabled?: boolean;
};

TransferListTitle

type TransferListTitle =
  | string
  | ((params: {
      countTotal: number;
      countSelected: number;
      clear: () => void;
      checkbox: ReactNode;
      searchInput: ReactNode;
    }) => ReactNode);

AvailableVirtualListProps

export type AvailableVirtualListProps = Pick<
  VirtualListProps<any>,
  | "height"
  | "itemHeight"
  | "threshold"
  | "isStaticItemHeight"
  | "scrollOptions"
  | "onScroll"
  | "wrapperChild"
>;

Transfer.Item