# transfer (w-transfer)

- **Import**: `WTransfer` from `win-design-next`
- **Tag**: `<w-transfer>`
- **说明**: Transfer 穿梭框
- **分类**: data-entry
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/transfer.md`

## API

## Transfer API

### Attributes

| 参数                  | 说明                                                                                                                                              | 类型                                                              | 默认值             | Version |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------ | ------- |
| model-value / v-model | 选中项绑定值                                                                                                                                      | ^[object]`Array`                                                  | []                 |
| data                  | Transfer 的数据源                                                                                                                                 | ^[object]`Record[]`                                               | []                 |
| filterable            | 是否可搜索                                                                                                                                        | ^[boolean]                                                        | false              |
| filter-placeholder    | 搜索框占位符                                                                                                                                      | ^[string]                                                         | —                  |
| filter-method         | 自定义搜索方法                                                                                                                                    | ^[Function]`(query: string, item: Record) => boolean`             | —                  |
| target-order          | 右侧列表元素的排序策略： 若为 `original`，则保持与数据源相同的顺序； 若为 `push`，则新加入的元素排在最后； 若为 `unshift`，则新加入的元素排在最前 | ^[enum]`'original' \| 'push' \| 'unshift'`                        | original           |
| titles                | 自定义列表标题                                                                                                                                    | ^[object]`[string, string]`                                       | []                 |
| button-texts          | 自定义按钮文案                                                                                                                                    | ^[object]`[string, string]`                                       | []                 |
| render-content        | 自定义数据项渲染函数                                                                                                                              | ^[object]`renderContent`                                          | —                  |
| format                | 列表顶部勾选状态文案                                                                                                                              | ^[object]`TransferFormat`                                         | {}                 |
| props                 | 数据源的字段别名                                                                                                                                  | ^[object]`TransferPropsAlias`                                     | —                  |
| left-default-checked  | 初始状态下左侧列表的已勾选项的 key 数组                                                                                                           | ^[object]`Array`                                                  | []                 |
| right-default-checked | 初始状态下右侧列表的已勾选项的 key 数组                                                                                                           | ^[object]`Array`                                                  | []                 |
| validate-event        | 是否触发表单验证                                                                                                                                  | ^[boolean]                                                        | true               |
| show-pagination       | 是否显示分页                                                                                                                                      | ^[boolean]                                                        | false              | V0.0.9  |
| page-size             | 每页显示条数                                                                                                                                      | ^[number]                                                         | 10                 | V0.0.9  |
| panel-width           | 自定义面板宽度                                                                                                                                    | ^[array]                                                          | ['200px', '200px'] | V0.0.9  |
| panel-height          | 自定义面板高度                                                                                                                                    | ^[string]                                                         | '278px'            | V0.0.9  |
| render-checked        | 左、右列表顶部的勾选状态文案渲染 Function                                                                                                         | ^[Function]`(checked: number, total: number, filed: any) => void` | —                  | V0.0.9  |

### Events

| 事件名             | 说明                                    | 类型                                                                                                | Version |
| ------------------ | --------------------------------------- | --------------------------------------------------------------------------------------------------- | ------- |
| change             | 右侧列表元素变化时触发                  | ^[Function]`(value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => void` |
| left-check-change  | 左侧列表元素被用户选中 / 取消选中时触发 | ^[Function]`(value: TransferKey[], movedKeys?: TransferKey[]) => void`                              |
| right-check-change | 右侧列表元素被用户选中 / 取消选中时触发 | ^[Function]`(value: TransferKey[], movedKeys?: TransferKey[]) => void`                              |
| left-page-change   | 左侧列表分页变化时触发                  | ^[Function]`(value: number) => void`                                                                | V0.0.9  |
| right-page-change  | 右侧列表分页变化时触发                  | ^[Function]`(value: number) => void`                                                                | V0.0.9  |

### Slots

| 插槽名       | 说明                                       |
| ------------ | ------------------------------------------ |
| default      | 自定义数据项的内容， 参数为 `{ option }`   |
| left-footer  | 左侧列表底部的内容                         |
| right-footer | 右侧列表底部的内容                         |
| left-empty   | 左侧面板为空或没有数据符合筛选条件时的内容 |
| right-empty  | 右侧面板为空或没有数据符合筛选条件时的内容 |

### Exposes

| 名称       | 说明                     | 类型                                            |
| ---------- | ------------------------ | ----------------------------------------------- |
| clearQuery | 清空某个面板的搜索关键词 | ^[Function]`(which: TransferDirection) => void` |
| leftPanel  | 左侧面板 ref             | ^[object]`Ref`                                  |
| rightPanel | 右侧面板 ref             | ^[object]`Ref`                                  |
