Transfer 穿梭框

左右列表穿梭选择，支持搜索过滤、分页与批量全选。

基础用法

<script setup lang="ts">
import { ref } from 'vue'

const data = [
  { key: 'a', label: '选项 A' },
  { key: 'b', label: '选项 B' },
  { key: 'c', label: '选项 C' },
]
const value = ref(['a'])
</script>

<template>
  <KbTransfer v-model="value" :data="data" />
</template>

待选 · 2

选项 B

选项 C

已选 · 1

选项 A

点选条目后用中间的箭头批量移动，移动会清空两侧的勾选状态。change 事件额外携带移动方向。

搜索过滤

打开 filterable 后两侧面板各带一个搜索框，按 label 做不区分大小写的包含匹配；搜索结果为空时显示空状态。

待选 · 24

候选项目 1

候选项目 2

候选项目 3

候选项目 4

候选项目 5

候选项目 6

候选项目 7

候选项目 8

候选项目 9

候选项目 10

候选项目 11

候选项目 12

候选项目 13

候选项目 14

候选项目 15

候选项目 16

候选项目 17

候选项目 18

候选项目 19

候选项目 20

候选项目 21

候选项目 22

候选项目 23

候选项目 24

已选 · 0

无匹配数据

分页

pageSize 大于 0 时两侧独立分页，翻页互不影响。表头复选框作用于当前页的可选条目（搜索状态下即当前搜索结果），支持全选与半选态。

待选 · 22

候选项目 3

候选项目 4

候选项目 5

候选项目 6

候选项目 7

候选项目 8

1 / 4

已选 · 2

候选项目 1

候选项目 2

1 / 1

自定义标题与禁用

titles 分别设置左右面板标题，标题后会显示该侧条目数量。

候选列表 · 2

选项 B

选项 C

已选列表 · 1

选项 A

API

TransferItem

属性	类型	默认值	说明
key	string	—	唯一键
label	string	—	显示文本
disabled	boolean	false	禁用该项，不可选中

Props

属性	类型	默认值	说明
data	TransferItem[]	[]	全部数据
modelValue	string[]	[]	右侧已选 key 列表
titles	[string, string]	['待选', '已选']	左右面板标题
filterable	boolean	false	开启搜索过滤
filterPlaceholder	string	'请输入搜索内容'	搜索框占位文案
pageSize	number	0	每页条数，0 表示不分页
disabled	boolean	false	整体禁用

事件

名称	参数	说明
update:modelValue	(value: string[])	穿梭结果变化
change	(value: string[], direction: 'left' | 'right')	与上者同时派发，附带移动方向