Transfer 穿梭框

基础用法

可搜索过滤

在数据很多的情况下，可以对数据进行搜索和过滤。

自定义

可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。

数据项属性别名

默认情况下，Transfer 仅能识别数据项中的 key、label 和 disabled 字段。如果你的数据的字段名不同，可以使用 props 属性为它们设置别名。

API

Attributes

属性名	说明	类型	Default
model-value / v-model	选中项绑定值	`object`	[]
data	Transfer 的数据源	`object`	[]
filterable	是否可搜索	`boolean`	false
filter-placeholder	搜索框占位符	`string`	—
filter-method	自定义搜索方法	`Function`	—
target-order	右侧列表元素的排序策略：若为 `original`，则保持与数据源相同的顺序；若为 `push`，则新加入的元素排在最后；若为 `unshift`，则新加入的元素排在最前	`enum`	original
titles	自定义列表标题	`object`	[]
button-texts	自定义按钮文案	`object`	[]
render-content	自定义数据项渲染函数	`object`	—
format	列表顶部勾选状态文案	`object`	{}
props	数据源的字段别名	`object`	—
left-default-checked	初始状态下左侧列表的已勾选项的 key 数组	`object`	[]
right-default-checked	初始状态下右侧列表的已勾选项的 key 数组	`object`	[]
validate-event	是否触发表单验证	`boolean`	true

Events

插槽名	说明	Type
change	右侧列表元素变化时触发	`Function`
left-check-change	左侧列表元素被用户选中 / 取消选中时触发	`Function`
right-check-change	右侧列表元素被用户选中 / 取消选中时触发	`Function`

Slots

Name	说明
default	自定义数据项的内容， The scope parameter is
left-footer	左侧列表底部的内容
right-footer	右侧列表底部的内容

Exposes

Method	说明	Type
clearQuery	清空某个面板的搜索关键词	`Function`

Type Declarations

Show declarations

import type { h as H, VNode } from 'vue'

type TransferKey = string | number

type TransferDirection = 'left' | 'right'

type TransferDataItem = Record<string, any>

type renderContent = (h: typeof H, option: TransferDataItem) => VNode | VNode[]

interface TransferFormat {
  noChecked?: string
  hasChecked?: string
}

interface TransferPropsAlias {
  label?: string
  key?: string
  disabled?: string
}