Preview Updated 2026-05-10

Transfer

Two lists with arrows in between to move items between "available" and "selected". Common for permission assignment and field selection.

Basic usage

dataSource is the full set; v-model / value is the array of selected keys. Each column has a select-all / invert checkbox; the arrow buttons move the current column’s checked items to the other side. searchable adds a search box on top of each column.

<script setup lang="ts">
import { ref } from 'vue';
import { CfTransfer, type TransferItem } from '@chufix-design/vue';

const data: TransferItem[] = [
  { key: 'auth', label: '权限管理' },
  { key: 'audit', label: '审计日志' },
  { key: 'billing', label: '计费' },
  { key: 'monitor', label: '监控告警' },
  { key: 'storage', label: '存储' },
  { key: 'cdn', label: 'CDN', disabled: true },
  { key: 'dns', label: 'DNS 解析' },
];

const target = ref<string[]>(['monitor', 'billing']);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CfTransfer :data-source="data" v-model="target" searchable />
    <span style="font-size: 12px; color: var(--fg-3);">已选 keys：<code>{{ target.join(', ') || '(空)' }}</code></span>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfTransfer } from '@chufix-design/vue';

const data= [
  { key: 'auth', label: '权限管理' },
  { key: 'audit', label: '审计日志' },
  { key: 'billing', label: '计费' },
  { key: 'monitor', label: '监控告警' },
  { key: 'storage', label: '存储' },
  { key: 'cdn', label: 'CDN', disabled: true },
  { key: 'dns', label: 'DNS 解析' },
];

const target = ref<string[]>(['monitor', 'billing']);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CfTransfer :data-source="data" v-model="target" searchable />
    <span style="font-size: 12px; color: var(--fg-3);">已选 keys：<code>{{ target.join(', ') || '(空)' }}</code></span>
  </div>
</template>

<CfTransfer dataSource={data} value={target} onChange={setTarget} searchable />

<CfTransfer dataSource={data} value={target} onChange={setTarget} searchable />

API

Prop	Type	Default	Description
`dataSource`	`TransferItem[]`	`—`	Full item list
`value` / `modelValue`	`string[]`	`—`	Controlled “selected” key array
`defaultValue`	`string[]`	`[]`	Uncontrolled initial selected keys
`titles`	`[string, string]`	`['Available', 'Selected']`	Titles for the two columns
`searchable`	`boolean`	`false`	Show search boxes

TransferItem

Field	Type	Description
`key`	`string`	Unique key
`label`	`string`	Display text
`disabled`	`boolean`	Disabled, cannot be checked or moved

Events: onChange(keys) — fired when the selected keys array changes.