Transfer Transfer

Rules

Basic Example

const rule = {
    type: "elTransfer",
    field: "transfer",
    title: "Transfer",
    value: [],
    props: {
        data: [
            {label: 'California', key: 'California'},
            {label: 'Illinois', key: 'Illinois'},
            {label: 'Maryland', key: 'Maryland'},
            {label: 'Texas', key: 'Texas'},
            {label: 'Florida', key: 'Florida'},
            {label: 'Colorado', key: 'Colorado'},
            {label: 'Connecticut', key: 'Connecticut'},
        ]
    },
}

Props Configuration Examples

Searchable

const rule = {
    type: "elTransfer",
    field: "users",
    title: "User Selection",
    value: [],
    props: {
        data: [
            {label: 'John', key: '1'},
            {label: 'Mary', key: '2'},
            {label: 'Tom', key: '3'},
        ],
        filterable: true,
        filterPlaceholder: "Enter keyword to search",
    },
}

Custom Titles and Buttons

const rule = {
    type: "elTransfer",
    field: "permissions",
    title: "Permission Assignment",
    value: [],
    props: {
        data: [
            {label: 'View', key: 'view'},
            {label: 'Edit', key: 'edit'},
            {label: 'Delete', key: 'delete'},
        ],
        titles: ['Available Permissions', 'Selected Permissions'],
        buttonTexts: ['Add', 'Remove'],
    },
}

Custom Data Fields

const rule = {
    type: "elTransfer",
    field: "products",
    title: "Product Selection",
    value: [],
    props: {
        data: [
            {name: 'Product A', id: '1'},
            {name: 'Product B', id: '2'},
        ],
        props: {
            key: 'id',
            label: 'name',
        },
    },
}

Events Examples

Listen to Selection Changes

const rule = {
    type: "elTransfer",
    field: "users",
    title: "User Selection",
    value: [],
    props: {
        data: [
            {label: 'John', key: '1'},
            {label: 'Mary', key: '2'},
        ],
    },
    on: {
        change: (value, direction, movedKeys) => {
            console.log('Right list changed:', value);
            console.log('Move direction:', direction);
            console.log('Moved keys:', movedKeys);
        },
        'left-check-change': (value, movedKeys) => {
            console.log('Left selection changed:', value, movedKeys);
        },
        'right-check-change': (value, movedKeys) => {
            console.log('Right selection changed:', value, movedKeys);
        },
    },
}

Count Quantity After Selection

const rule = [
    {
        type: "elTransfer",
        field: "users",
        title: "User Selection",
        value: [],
        props: {
            data: [
                {label: 'John', key: '1'},
                {label: 'Mary', key: '2'},
                {label: 'Tom', key: '3'},
            ],
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Auto-update selected count
                $inject.api.setValue('selectedCount', value.length);
            },
        },
    },
    {
        type: "input-number",
        field: "selectedCount",
        title: "Selected Count",
        props: {
            disabled: true,
        },
    },
]

Full configuration: Element_Transfer

value :Array

Props

Attribute Name	Description	Type	Default Value
data	Data source for Transfer	object	[]
filterable	Whether searchable	boolean	false
filterPlaceholder	Search box placeholder	string	—
filterMethod	Custom search method	Function	—
targetOrder	Sorting strategy for right list elements: If original, maintain the same order as data source; If push, newly added elements are placed at the end; If unshift, newly added elements are placed at the beginning	enum	original
titles	Custom list titles	object	[]
buttonTexts	Custom button text	object	[]
renderContent	Custom data item rendering function	object	—
format	Checked state text at top of list	object	{}
props	Field aliases for data source	object	—
leftDefaultChecked	Key array of checked items in left list in initial state	object	[]
rightDefaultChecked	Key array of checked items in right list in initial state	object	[]
validateEvent	Whether to trigger form validation	boolean	true

Events

Event Name	Description	Type
change	Triggered when right list elements change	Function
left-check-change	Triggered when left list elements are selected / deselected by user	Function
right-check-change	Triggered when right list elements are selected / deselected by user	Function

Slots

Slot Name	Description
default	Custom content for data items, parameter is { option }
left-footer	Content at bottom of left list
right-footer	Content at bottom of right list
left-empty	Content when left panel is empty or no data matches filter condition
right-empty	Content when right panel is empty or no data matches filter condition