穿梭框 ​

基本用法 ​

数据通过 data 属性传递到 Transfer。数据需要是一个对象数组，每个对象应具有以下属性：key 是数据项的标识，label 是显示文本，disabled 指示该项是否禁用。当前实现采用标签页切换、整屏列表和底部操作栏的布局，目标列表中的项目会与绑定到 v-model 的数组保持同步。如果不希望目标列表初始为空，可以直接用数组初始化 v-model。

List 10/15

可过滤 ​

您可以搜索和过滤数据项。

将 filterable 设置为 true 后，当前标签页顶部会显示搜索框。默认情况下，如果数据项的 label 包含搜索关键字，则该数据项会包含在搜索结果中。您也可以通过 filter-method 自定义过滤逻辑；当关键字变化时，组件会把搜索关键字和当前数据项传给该方法，返回 true 的数据项会显示在结果列表中。

List 10/7

可定制 ​

您可以自定义标签标题、底部操作按钮文案、数据项渲染方式、状态摘要文本以及面板页脚内容。

使用 titles、button-texts、render-content 和 format 分别自定义标签标题、底部操作按钮文案、数据项渲染函数和状态摘要文本。您也可以使用作用域插槽自定义数据项内容。面板页脚提供 left-footer 和 right-footer 两个命名插槽。如果希望初始就选中部分项目，可以使用 left-default-checked 和 right-default-checked。此示例同时演示了 change 事件。请注意，此示例无法在 JSFiddle 中运行，因为它不支持 JSX 语法。在实际项目中，只要正确配置相关依赖，render-content 就可以正常工作。

Customize data items using render-content

Source14

Customize data items using scoped slot

Source14

自定义空内容 2.9.0 ​

当列表为空或没有找到过滤结果时，您可以自定义内容。

使用 left-empty 和 right-empty 插槽自定义每个面板的空内容。

List 10/15

属性别名 ​

默认情况下，Transfer 会在数据项中查找 key、label 和 disabled。如果您的数据项使用了不同的字段名，可以通过 props 属性定义别名。

此示例中的数据项没有 key 或 label，而是使用 value 和 desc。因此需要为 key 和 label 设置别名。

List 10/15

穿梭框 API ​

穿梭框属性 ​

名称描述类型默认
model-value / v-model绑定值array[]
data数据源array[]
filterable是否可过滤booleanfalse
filter-placeholder过滤输入框占位符string-
filter-method自定义过滤方法Function-
target-order目标列表中元素的排序策略。如果设置为 original，元素将保持与数据源相同的顺序；如果设置为 push，新添加的元素会追加到底部；如果设置为 unshift，新添加的元素会插入到顶部enumoriginal
titles自定义标签标题array[]
button-texts自定义底部操作栏按钮文本array[]
render-content数据项的自定义渲染函数object-
format标签页与工具栏中的状态摘要文本object{}
props数据源的 prop 别名object-
left-default-checked左侧列表初始选中的数据项 key 数组array[]
right-default-checked右侧列表初始选中的数据项 key 数组array[]
validate-event是否触发表单校验booleantrue

穿梭框事件 ​

名称描述类型
change右侧列表中的数据项发生变化时触发Function
left-check-change最终用户更改左侧列表中数据项的选中状态时触发Function
right-check-change最终用户更改右侧列表中数据项的选中状态时触发Function

穿梭框插槽 ​

名称描述类型
default数据项的自定义内容object
left-footer左侧面板页脚内容-
right-footer右侧面板页脚内容-
left-empty 2.9.0左侧面板为空或没有匹配过滤结果时显示的内容-
right-empty 2.9.0右侧面板为空或没有匹配过滤结果时显示的内容-

穿梭框暴露 ​

名称描述类型
clearQuery清除指定面板的过滤关键字Function
leftPanel左侧面板实例object
rightPanel右侧面板实例object

穿梭面板 API ​

穿梭面板暴露 ​

名称描述类型
query过滤关键字string

类型声明 ​

显示声明
ts
import type { h as H, VNode } from 'vue'

type TransferKey = string | number

type TransferDirection = 'left' | 'right'

type TransferDataItem = Record<string, any>

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

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

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