Transfer

Uso básico

Los datos son pasados a la transferencia a través del atributo data. Los datos deben ser un array de objetos, y cada objeto debe tener estos atributos: key siendo la identificación del elemento de datos, label siendo el texto mostrado y disabled indicando si el elemento de datos está desactivado. Los elementos dentro de la lista de destino están sincronizados con la variable que se enlaza al v-model, y el valor de esa variable es un array de keys de los elementos destino. Por lo tanto, si no quiere que la lista de destino esté vacía inicialmente, puede inicializar el v-model con un array.

Filtrable

Puede buscar y filtrar elementos de datos.

Establezca el atributo filterable a true para habilitar el modo filtro. Por defecto, si el elemento de datos label contiene la palabra clave de búsqueda, se incluirá en el resultado de la búsqueda. Además, puede implementar su propio método de filtro con el atributo filter-method. Toma un método y pasa la palabra clave de búsqueda y cada elemento de los datos cada vez que la palabra clave cambia. Para un determinado elemento de datos, si el método devuelve true, se incluirá en la lista de resultados.

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.

Use titles, button-texts, render-content y format respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Además, también puede utilizar los slots para personalizar los elementos de los datos. Para el pie de la lista hay dos slots: left-footer y right-footer. Además, si quiere algunos items marcados inicialmente puede usar left-default-checked y right-default-checked. Finalmente este ejemplo muestra el evento change. Tenga en cuenta que esta demostración no puede ejecutarse en JSFiddle porque no soporta la sintaxis JSX. En un proyecto real render-content funcionará si las dependencias relevantes están configuradas correctamente.

vue

<template>
  <p style="text-align: center; margin: 0 0 20px">
    Customize data items using render-content
  </p>
  <div style="text-align: center">
    <el-transfer
      v-model="leftValue"
      style="text-align: left; display: inline-block"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :render-content="renderFunc"
      :titles="['Source', 'Target']"
      :button-texts="['To left', 'To right']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
      :data="data"
      @change="handleChange"
    >
      <template #left-footer>
        <el-button class="transfer-footer" size="small">Operation</el-button>
      </template>
      <template #right-footer>
        <el-button class="transfer-footer" size="small">Operation</el-button>
      </template>
    </el-transfer>
    <p style="text-align: center; margin: 50px 0 20px">
      Customize data items using scoped slot
    </p>
    <div style="text-align: center">
      <el-transfer
        v-model="rightValue"
        style="text-align: left; display: inline-block"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['Source', 'Target']"
        :button-texts="['To left', 'To right']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        :data="data"
        @change="handleChange"
      >
        <template #default="{ option }">
          <span>{{ option.key }} - {{ option.label }}</span>
        </template>
        <template #left-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
      </el-transfer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type {
  TransferDirection,
  TransferKey,
  renderContent,
} from 'element-plus'

interface Option {
  key: number
  label: string
  disabled: boolean
}

const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref(generateData())
const rightValue = ref([1])
const leftValue = ref([1])

const renderFunc: renderContent = (h, option) => h('span', null, option.label)

const handleChange = (
  value: TransferKey[],
  direction: TransferDirection,
  movedKeys: TransferKey[]
) => {
  console.log(value, direction, movedKeys)
}
</script>

<style>
.transfer-footer {
  margin-left: 15px;
  padding: 6px 5px;
}
</style>

Custom empty content 2.9.0

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

Use left-empty and right-empty slots to customize the empty content for each panel.

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.

En este ejemplo los elementos no tienen key y label, en vez de eso tienen value y desc. Así que tiene que añadir alias para key y label.

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
default	Custom content for data items. The scope parameter is `{ option }`
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	Type
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
}