Transfer 穿梭框

双栏穿梭选择框，用于将数据在左右两栏之间来回移动，常用于多项数据的批量选择与管理。

import { createApp } from 'vue'
import { ElTransfer } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElTransfer)

基础用法

可搜索过滤

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

自定义

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

自定义空内容

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

数据项属性别名

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

Transfer API

Transfer Attributes

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

Transfer Events

事件名	说明	类型
change	右侧列表元素变化时触发	Function
left-check-change	左侧列表元素被用户选中 / 取消选中时触发	Function
right-check-change	右侧列表元素被用户选中 / 取消选中时触发	Function

Transfer Slots

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

Transfer Exposes

名称	说明	类型
clearQuery	清空某个面板的搜索关键词	Function
leftPanel	左侧面板 ref	object
rightPanel	右侧面板 ref	object

Transfer Panel API

Transfer Panel Exposes

名称	描述	Type
query	过滤关键词	string