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.

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.

API

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

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`

Slots

Name	Descripción
default	Custom content for data items. The scope parameter is
left-footer	content of left list footer
right-footer	content of right list footer

Exposes

Method	Descripción	Type
clearQuery	clear the filter keyword of a certain panel	`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
}