穿梭框 (Transfer)

穿梭框组件，用于在两个列表之间移动数据。

组件特性

🔄 数据穿梭：在源列表和目标列表之间无缝移动数据。
🔍 搜索过滤：内置搜索功能，方便在大量数据中快速查找。
🖱️ 拖拽排序：支持对已选择的目标列表项进行拖拽排序。
📝 表单集成：完美支持与 BrForm 结合使用，实现表单校验。
🎨 高度定制：提供丰富的插槽支持自定义渲染，支持主题定制。

基础用法

最基本的用法。你需要提供 data 作为数据源，并使用 v-model 绑定已选择的项的 key。

搜索与拖拽排序

通过设置 filterable 开启搜索功能。通过设置 draggable 开启目标列表的拖拽排序功能。

表单集成

BrTransfer 可以与 BrForm 无缝集成，实现表单验证。

主题定制

使用 BrConfigProvider 可以轻松自定义组件的主题颜色和圆角。

API

Transfer 属性 (Props)

属性名	类型	默认值	说明
`modelValue` / `v-model`	`(string \| number)[]`	`[]`	绑定值，表示已选择的项
`data`	`TransferDataItem[]`	`[]`	数据源
`filterable`	`boolean`	`false`	是否开启搜索
`filterPlaceholder`	`string`	`'Search here'`	搜索框占位符
`filterMethod`	`(query: string, item: TransferDataItem) => boolean`	-	自定义搜索方法
`titles`	`[string, string]`	`['Source', 'Target']`	左右面板的标题
`buttonTexts`	`[string, string]`	`['', '']`	左右按钮的文本
`draggable`	`boolean`	`false`	是否允许拖拽目标面板的项进行排序
`targetOrder`	`'original' \| 'push' \| 'unshift'`	`'original'`	目标面板的数据排序策略
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	穿梭框尺寸
`disabled`	`boolean`	`false`	是否禁用
`emptyText`	`string`	`'No data'`	数据为空时的文本

TransferDataItem 数据结构

属性名	类型	说明
`key`	`string \| number`	唯一标识符
`label`	`string`	显示文本
`disabled`	`boolean`	是否禁用该项
`[key: string]`	`any`	其他自定义属性

Transfer 事件 (Emits)

事件名	参数	说明
`update:modelValue`	`(value: (string \| number)[])`	绑定值改变时触发
`change`	`(value: (string \| number)[], direction: 'left' \| 'right', movedKeys: (string \| number)[])`	选项在两边移动时触发
`search`	`(query: string, direction: 'left' \| 'right')`	搜索内容改变时触发
`left-check-change`	`(checkedKeys: (string \| number)[], checkedNodes: TransferDataItem[])`	左侧面板选中项改变时触发
`right-check-change`	`(checkedKeys: (string \| number)[], checkedNodes: TransferDataItem[])`	右侧面板选中项改变时触发

Transfer 插槽 (Slots)

插槽名	说明
`option`	自定义数据项的内容
`leftEmpty`	左侧面板无数据时的内容
`rightEmpty`	右侧面板无数据时的内容
`leftFooter`	左侧面板的底部内容
`rightFooter`	右侧面板的底部内容