2.12.0

Transfer 穿梭框 ​

基础用法 ​

可筛选 ​

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

可自定义 ​

您可以自定义列表标题、按钮文本、数据项的渲染函数、列表页脚中的选中状态文本以及列表页脚内容。

自定义空数据内容 2.9.0 ​

您可以自定义列表为空或没有筛选结果时显示的内容。

Prop 别名 ​

默认情况下，Transfer 组件会从数据项中寻找 key、label 和 disabled 属性。 如果您的数据项的属性名不同，您可以使用 props 属性来定义别名。

Transfer API ​

Transfer 属性 ​

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

Transfer 事件 ​

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

Transfer 插槽 ​

名称描述类型
default数据项的自定义内容。object
left-footer左侧列表底部的内容—
right-footer右侧列表底部的内容—
left-empty 2.9.0当左侧面板为空或没有数据匹配筛选器时显示的内容—
right-empty 2.9.0当右侧面板为空或没有数据匹配筛选器时显示的内容—

Transfer Exposes ​

名称描述类型
clearQuery清除某个面板的筛选关键字Function
leftPanel左侧面板 refobject
rightPanel右侧面板 refobject

Transfer Panel API ​

Transfer Panel Exposes ​

名称描述类型
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 = (h: typeof H, option: TransferDataItem) => VNode | VNode[]

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

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

来源 ​

组件 • 样式 • 文档

贡献者 ​