Transfer

Rules

Basic Example

const rule = {
    type: "transfer",
    field: "transfer",
    title: "Transfer",
    value: [],
    props: {
        data:[{
            value: 1,
            label: 'Content 1',
            disabled: false
        },{
            value: 2,
            label: 'Content 2',
            disabled: true
        },{
            value: 3,
            label: 'Content 3',
            disabled: false
        },]
    },
}

Props Configuration Examples

Custom Titles

const rule = {
    type: "transfer",
    field: "transfer",
    title: "Permission Assignment",
    value: [],
    props: {
        data: [
            { value: 1, label: 'View Users' },
            { value: 2, label: 'Edit Users' },
            { value: 3, label: 'Delete Users' },
        ],
        titles: ['To Assign', 'Assigned'],
        search: true,
    },
}

Search Function

const rule = {
    type: "transfer",
    field: "transfer",
    title: "Permission Assignment",
    value: [],
    props: {
        data: [
            { value: 1, label: 'View Users' },
            { value: 2, label: 'Edit Users' },
        ],
        search: true,
        searchProps: {
            placeholder: "Search permissions",
        },
    },
}

Events Examples

Listen to Changes

const rule = {
    type: "transfer",
    field: "transfer",
    title: "Permission Assignment",
    value: [],
    props: {
        data: [
            { value: 1, label: 'View Users' },
            { value: 2, label: 'Edit Users' },
        ],
    },
    on: {
        change: (value, context) => {
            console.log('Right list changed:', value);
            console.log('Move direction:', context.direction);
        },
    },
}

Count Selected Items

const rule = [
    {
        type: "transfer",
        field: "transfer",
        title: "Permission Assignment",
        value: [],
        props: {
            data: [
                { value: 1, label: 'View Users' },
                { value: 2, label: 'Edit Users' },
            ],
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // Automatically update selected count
                $inject.api.setValue('selectedCount', value.length);
            },
        },
    },
    {
        type: "input",
        field: "selectedCount",
        title: "Selected Permissions Count",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: TDesign_Transfer