NUR

主题

Transfer 穿梭框 ​

在两栏中移动选项元素，完成数据的转移操作。

基础用法 ​

列表一0/6
选项 B
选项 D
选项 E
选项 F
选项 G
选项 H
列表二0/2
选项 A
选项 C

右侧值：a, c

vue
<my-transfer v-model="value" :data="data" />

const data = [
  { key: 'a', label: '选项 A' },
  { key: 'b', label: '选项 B' },
  { key: 'c', label: '选项 C' },
  { key: 'd', label: '选项 D' },
]

可搜索过滤 ​

filterable 开启搜索过滤，快速定位选项。

列表一0/10
北京
上海
广州
深圳
杭州
成都
武汉
南京
西安
重庆
列表二0/0
暂无数据

右侧值：空

vue
<my-transfer v-model="value" :data="data" filterable />

自定义标题 ​

通过 titles 属性自定义左右面板标题。

未选城市0/8
选项 A
选项 B
选项 C
选项 D
选项 E
选项 F
选项 G
选项 H
已选城市0/0
暂无数据
vue
<my-transfer v-model="value" :data="data" :titles="['未选城市', '已选城市']" filterable />

自定义内容 ​

通过 #item 插槽自定义每个选项的渲染。

列表一0/8
选项 A a
选项 B b
选项 C c
选项 D d
选项 E e
选项 F f
选项 G g
选项 H h
列表二0/0
暂无数据
vue
<my-transfer v-model="value" :data="data">
  <template #item="{ item, side }">
    <span :style="{ color: side === 'right' ? 'green' : '' }">
      {{ item.label }}
    </span>
  </template>
</my-transfer>

自定义空内容 ​

通过 #empty 插槽自定义无数据时的提示内容。

自定义空状态

可选0/0

暂无可用数据

已选0/0

暂无可用数据

vue
<my-transfer v-model="value" :data="[]">
  <template #empty>
    <div style="text-align:center">
      <svg>...</svg>
      <p>暂无可用数据</p>
    </div>
  </template>
</my-transfer>

数据项属性别名 ​

propsAlias 将自定义字段映射到 key、label、disabled。

源数据0/8
Alpha
Beta
Gamma
Delta
Epsilon
Zeta
Eta
Theta
目标数据0/0
暂无数据
vue
<my-transfer v-model="value" :data="data" :propsAlias="{ key: 'id', label: 'name' }" />

const data = [
  { id: 'a1', name: 'Alpha' },
  { id: 'b2', name: 'Beta' },
  { id: 'c3', name: 'Gamma' },
]

组件结构 ​

根元素 .my-transfer 横向排列：左侧面板 + 中间操作按钮区 + 右侧面板。每个面板包含头部、可选的搜索框、选项列表。

CSS 类名 ​

类名说明
.my-transfer根元素
.my-transfer__panel左/右面板
.my-transfer__header面板头部
.my-transfer__count已选计数
.my-transfer__filter搜索过滤区域
.my-transfer__filter-input搜索输入框
.my-transfer__list选项列表容器
.my-transfer__item选项行
.my-transfer__item.is-checked已勾选状态
.my-transfer__check复选框容器
.my-transfer__check-box复选框
.my-transfer__check-box.is-checked已勾选状态
.my-transfer__label选项标签文本
.my-transfer__empty无数据提示
.my-transfer__actions中间操作按钮区

API ​

Transfer Props ​

属性说明类型默认值
modelValue右侧选中的 key 数组 (v-model)(string | number)[][]
data数据源TransferItem[][]
titles左右面板标题[string, string]['列表一', '列表二']
filterable可搜索过滤booleanfalse
filterPlaceholder搜索框占位文字string'请输入关键词'
propsAlias字段别名映射{ key?, label?, disabled? }—

Transfer Events ​

事件说明回调
update:modelValue值变更(value: (string | number)[])
change右侧值变更(value: (string | number)[])
left-check-change左侧勾选项变化(keys: (string | number)[])
right-check-change右侧勾选项变化(keys: (string | number)[])

Transfer Slots ​

名称说明作用域
item自定义选项内容{ item, side }
empty自定义空内容（两侧共用）—
empty-left自定义左侧空内容—
empty-right自定义右侧空内容—

TransferItem ​

ts
interface TransferItem {
  key: string | number
  label: string
  disabled?: boolean
  [key: string]: any
}