Transfer 穿梭框

双栏多选选择器，直观展示已选与未选，支持搜索、分组、拖拽。

何时使用

需要在两栏之间移动数据、批量选择时。

基础用法

数据项需传入 label、value、key。

<script setup lang="ts">
import { ref } from "vue";
import { Transfer } from "@reglow/reui";

const value = ref([]);
const data = Array.from({ length: 20 }, (_, i) => ({
  label: `选项 ${i}`,
  value: i,
  key: `key-${i}`,
}));
</script>

<template>
  <Transfer
    v-model="value"
    :data-source="data"
    :height="400"
    filter
    @change="(val, items) => console.log(val, items)"
  />
</template>

待选项 (20)

已选项 (3)

选项 1

选项 2

选项 3

分组模式

设置 type 为 groupList，数据源使用分组结构。

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

const value = ref([]);
const data = [
  {
    title: "类别 A",
    children: [
      { label: "A-1", value: 1, key: "1" },
      { label: "A-2", value: 2, key: "2" },
      { label: "A-3", value: 3, key: "3" },
    ],
  },
  {
    title: "类别 B",
    children: [
      { label: "B-1", value: 4, key: "4" },
      { label: "B-2", value: 5, key: "5" },
      { label: "B-3（禁用）", value: 6, key: "6", disabled: true },
    ],
  },
];
</script>

<template>
  <Transfer v-model="value" :data-source="data" type="groupList" :height="400" />
</template>

可搜索

设置 filter 开启搜索功能。

<template>
  <Transfer
    v-model="value"
    :data-source="data"
    filter
    :height="400"
  />
</template>

拖拽排序

设置 draggable 开启右侧已选项的拖拽排序功能。

<template>
  <Transfer
    v-model="value"
    :data-source="data"
    draggable
    :height="400"
  />
</template>

左侧分页

设置 pagination 开启左侧分页功能。

<script setup lang="ts">
const data = Array.from({ length: 100 }, (_, i) => ({
  label: `选项 ${i}`,
  value: i,
  key: `key-${i}`,
}));
</script>

<template>
  <Transfer
    v-model="value"
    :data-source="data"
    :pagination="{ pageSize: 10 }"
    :height="400"
  />
</template>

受控页码

通过 currentPage 和 onPageChange 受控管理页码。

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

const currentPage = ref(1);
</script>

<template>
  <Transfer
    v-model="value"
    :data-source="data"
    :pagination="{
      pageSize: 10,
      currentPage: currentPage,
      onPageChange: (p) => currentPage = p,
    }"
    :height="400"
  />
</template>

禁用

设置 disabled 禁用整个组件。

<template>
  <Transfer
    v-model="value"
    :data-source="data"
    disabled
    :height="400"
  />
</template>

默认值

使用 default-value 设置非受控默认选中值。

<script setup lang="ts">
const data = Array.from({ length: 20 }, (_, i) => ({
  label: `选项 ${i}`,
  value: i,
  key: `key-${i}`,
}));
</script>

<template>
  <Transfer
    :data-source="data"
    :default-value="[2, 4]"
    :height="400"
    @change="(val) => console.log(val)"
  />
</template>

自定义标题

通过 title-text 自定义左右两侧标题。

<template>
  <Transfer
    v-model="value"
    :data-source="data"
    :title-text="['待选列表', '已选列表']"
    :height="400"
  />
</template>

禁用单个选项

在数据项中设置 disabled: true 可禁用单个选项。

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

const value = ref([]);
const data = [
  { label: "选项1", value: 1, key: "1" },
  { label: "选项2（禁用）", value: 2, key: "2", disabled: true },
  { label: "选项3", value: 3, key: "3" },
];
</script>

<template>
  <Transfer v-model="value" :data-source="data" :height="300" />
</template>

导入

import { Transfer } from "@reglow/reui";
import type { TransferItem, TransferGroupItem } from "@reglow/reui";

Props

属性	类型	默认值	说明
`modelValue`	`(string \| number)[]`	`[]`	选中值（v-model）
`dataSource`	`TransferItem[] \| TransferGroupItem[]`	`[]`	数据源
`defaultValue`	`(string \| number)[]`	`[]`	默认选中值
`type`	`"list" \| "groupList"`	`"list"`	列表 / 分组模式
`disabled`	`boolean`	`false`	是否禁用
`filter`	`boolean`	`false`	可搜索
`searchPlaceholder`	`string`	`搜索`	搜索占位文字
`filterProp`	`string`	`label`	搜索匹配属性
`titleText`	`[string, string]`	`["源", "目标"]`	左右标题
`draggable`	`boolean`	`false`	可拖拽排序
`pagination`	`TransferPagination \| boolean`	`false`	分页配置
`showAllSelect`	`boolean`	`true`	显示全选按钮
`showClear`	`boolean`	`true`	显示清空按钮
`emptyText`	`[string, string]`	`["暂无数据", "暂无数据"]`	空数据文案
`height`	`number \| string`	`400`	高度
`class`	`string`	-	附加类名

Events

事件	说明	回调参数
`change`	选中变化	`(value, items)`
`search`	搜索	`(direction, value)`
`pageChange`	页码变化	`(page)`

类型

TransferItem

属性	类型	默认值	说明
`label`	`string`	-	标签
`value`	`string \| number`	-	值
`key`	`string`	用 `value`	唯一标识
`disabled`	`boolean`	`false`	是否禁用

TransferGroupItem

属性	类型	说明
`title`	`string`	分组标题
`children`	`TransferItem[]`	子项

TransferPagination

属性	类型	默认值	说明
`pageSize`	`number`	`10`	每页条数
`currentPage`	`number`	-	当前页码（受控）
`defaultCurrentPage`	`number`	`1`	默认页码
`onPageChange`	`(page: number) => void`	-	页码变化回调

国际化

搜索占位、标题、空状态、全选/取消全选等文案默认跟随全局语言（zh-CN / zh-TW / en-US），传 prop 可覆盖。

TimePicker 时间选择器

点击输入框弹出时间面板进行选择，基于 dayjs。

TreeSelect 树选择器

用于多层级树形数据的结构化展示与选取，如文件夹、组织架构、地区分类。

内容锚点

何时使用
基础用法
分组模式
可搜索
拖拽排序
左侧分页
受控页码
禁用
默认值
自定义标题
禁用单个选项
导入
Props
Events
类型
国际化