TTransfer / 穿梭框
Transfer moves items between two columns. Supports search filtering, keep-source mode, and custom item rendering. / 穿梭框用于在两栏之间移动数据项,支持搜索过滤、保留源模式和自定义渲染。
Props / 属性
| Prop | Type / 类型 | Default / 默认值 | Description / 说明 |
|---|---|---|---|
data | TransferOption[] | [] | All options |
filterable | boolean | false | Enable search |
keepSource | boolean | false | Keep source items after transfer |
leftTitle | string | '待选列表' | Left column title |
rightTitle | string | '已选列表' | Right column title |
Basic Usage / 基础用法
vue
<script setup lang="ts">
import { TTransfer } from '@gulcc/tabler-vue'
const data = [
{ key: '1', label: 'Option 1' },
{ key: '2', label: 'Option 2' },
]
</script>
<template>
<TTransfer :data="data" filterable />
</template>Tips / 避坑指南
keepSourceshows transferred items as checked+disabled on the left side- Search filters both columns simultaneously when
filterable=true