---
title: Transfer 穿梭框
description: 以直观的方式在两栏中移动选项元素，是对选项进行单个或批量移动从而完成挑选的数据容器。左栏是“源”，右边是“目标”。
isComponent: true
usage: { title: "", description: "" }
spline: data
author: swimly
---

## 基础用法

通过`data`设置源数据，通过`checked`或者`defaultChecked`来设置默认选中。

{{ base }}

## 分页功能

当数据较多的时候，为了方便操作，可通过`pagination`来设置分页功能。

{{ pagination }}

## 搜索

通过`search`属性，可设置快捷搜索功能。

{{ search }}

## 显示全选

通过`showCheckAll`可设置打开全选功能。

{{ checkAll }}

## 选中排序

通过`targetSort`可设置选中的值排序类型，可选：`original`，`push`，`unshift`，默认为`original`。

{{ targetSort }}

## 设置标题

通过`title`可设置左右两边的标题内容

{{ title }}

## 设置操作方向

通过`direction`可设置穿梭框可操作的方向，可选：`left`，`right`，`both`，默认为`both`。

{{ direction }}

## 自定义操作按钮

通过`operation`可自定义中间操作按钮的样式。

{{ operation }}

## 树穿梭框

支持配合`tree`组件一起适用，适用于复杂选项场景

{{ tree }}

## 禁用

通过`disabled`属性设置禁用。

{{ disabled }}
