跳到主要内容
Termlib

UI 组件 · 表单输入

穿梭框

Transfer

也叫：穿梭选择器、双栏选择、Transfer List、左右选择框

左右两个列表加中间的箭头按钮，把项目从「可选」一侧移到「已选」一侧，用来批量挑选。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

做一个成员分配穿梭框：左栏「全部成员」、右栏「已加入」，每栏顶部有搜索框和全选复选框，列表项前有复选框；中间上下两个箭头按钮，没有勾选时置灰；每栏标题右侧显示「已选 2 / 共 30 人」，列表超过 8 项时栏内滚动。

发给

01判断

你的内容是这样吗？

对照两列，确认穿梭框是不是你要找的。

符合这些情况，用穿梭框

  • 从几十到几百个平铺选项里挑出一批，并需要随时看到已选结果
  • 给角色分配权限、给项目添加成员这类在两组之间调配的操作
  • 选择要导出或显示的字段，并可能调整已选字段

是这些情况，换成别的

  • 选项只有几个，用复选框组或多选下拉更省空间

    改用复选框

  • 数据有明显的上下级结构，用带复选框的树形控件

    改用树形控件

  • 表单里只需要选出一个值

  • 手机等窄屏上，左右两栏并排放不下

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    左右两栏没有搜索框，几百项里只能靠滚动一个个找

  2. 02

    中间按钮没有禁用状态，没勾选时点了也没反应

  3. 03

    两栏没有数量统计，看不出一共选了多少

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由左右两个带标题、搜索框和复选框列表的面板，以及中间的左右移动按钮组成。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1左右并排两个带边框的列表面板
  2. 2两个面板中间有一上一下两个箭头按钮
  3. 3面板顶部有标题、全选复选框和数量统计

04解释

详细解释

穿梭框由左右两栏组成：左边是全部可选项，右边是已选项，中间有向右、向左两个箭头按钮。用户在左边勾选若干项，点向右箭头就把它们移到右边；反过来也能移回去。每栏顶部通常有搜索框和「全选」复选框，并显示「已选 3 / 共 20 项」。典型场景：给角色分配权限、选择要导出的字段、把成员加入项目组。

和 下拉选择（多选模式）相比，穿梭框能同时看到「选了什么」和「还剩什么」，适合在几十到几百项里挑一批。和 树形控件 的区别：数据有层级时用带复选框的树，数据是平铺的一列时用穿梭框。和 级联选择 差别更大：级联选择是沿层级选出一个值。

开发者信息
术语 ID
component-transfer
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-transfer
  • .el-transfer
  • .arco-transfer
  • .t-transfer
  • .n-transfer
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • transfer
  • dual-list
  • shuttle
  • transfer-list
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Transfer
  • DualListBox
  • TransferList
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30