开发预览更新于 2026-05-10

Transfer 穿梭框

两栏列表 + 中间箭头，把元素在「可选」与「已选」之间移动，常用于权限分配、字段勾选。

基础用法

dataSource 是全集，v-model / value 是已选 keys 数组。每栏有「全选 / 反选」复选框，箭头按钮把当前栏勾选项移到对侧。searchable 在每栏顶部加搜索框。

<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

属性	类型	默认值	说明
`dataSource`	`TransferItem[]`	`—`	全集列表
`value` / `modelValue`	`string[]`	`—`	受控的「已选」key 数组
`defaultValue`	`string[]`	`[]`	非受控初始已选 keys
`titles`	`[string, string]`	`['可选', '已选']`	两栏标题
`searchable`	`boolean`	`false`	显示搜索框

TransferItem

字段	类型	说明
`key`	`string`	唯一 key
`label`	`string`	显示文本
`disabled`	`boolean`	禁用，不可勾选 / 移动

事件：onChange(keys) —— 已选 keys 数组变化时触发。