Transfer

Uso básico

Filtrable

Puede buscar y filtrar elementos de datos.

Personalizable

Puede personalizar los títulos de la lista, los textos de los botones, la función de renderizado para los elementos de datos, la comprobación del estado de los textos en el pie de la lista y el contenido del pie.

Custom empty content 2.9.0

You can customize the content when the list is empty or when no filtering results are found.

Alias de las props

Por defecto, Transfer busca key, label y disabled en cada elemento. Si sus datos tienen diferentes nombres de clave, puede usar el atributo props para definir distintos alias.

Transfer API

Transfer Attributes

Nombre	Descripción	Tipo	Default
model-value / v-model	valor vinculado	`object`	[]
data	Origen de datos	`object`	[]
filterable	Si se puede filtrar	`boolean`	false
filter-placeholder	Placeholder para el input del filtro	`string`	—
filter-method	Método de filtrado	`Function`	—
target-order	estrategia de órdenes para elementos de la lista destino. Si está configurado en `original`, los elementos mantendrán el mismo orden que la fuente de datos. Si está configurado para `push`, los nuevos elementos añadidos se insertaran al final. Si se ajusta a `unshift`, los nuevos elementos añadidos se insertarán en la parte superior.	`enum`	original
titles	Títulos de las listas	`object`	[]
button-texts	Texto de los botones	`object`	[]
render-content	Función de renderizado	`object`	—
format	Texto para el status en el header	`object`	{}
props	prop alias para el origen de datos	`object`	—
left-default-checked	Array de claves de los elementos marcados inicialmente en la lista de la izquierda	`object`	[]
right-default-checked	Array de claves de los elementos marcados inicialmente en la lista de la derecha	`object`	[]
validate-event	si se debe activar la validación del formulario	`boolean`	true

Transfer Events

Nombre	Descripción	Type
change	triggers when data items change in the right list	`Function`
left-check-change	triggers when end user changes the checked state of any data item in the left list	`Function`
right-check-change	triggers when end user changes the checked state of any data item in the right list	`Function`

Transfer Slots

Name	Descripción	Type
default	Custom content for data items.	`object`
left-footer	content of left list footer	—
right-footer	content of right list footer	—
left-empty 2.9.0	content when left panel is empty or when no data matches the filter	—
right-empty 2.9.0	content when right panel is empty or when no data matches the filter	—

Transfer Exposes

Name	Descripción	Type
clearQuery	clear the filter keyword of a certain panel	`Function`
leftPanel	left panel ref	`object`
rightPanel	right panel ref	`object`

Transfer Panel API

Transfer Panel Exposes

Name	Description	Parámetros
query	filter keyword	`string`

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
}