Transfer

Rules

Basic Example

const rule = {
    type:"aTransfer",
    title:"Transfer",
    field:"transfer",
    modelField:"selectedKeys",
    value:[],
    props:{
        titles:['Source', 'Target'],
        render: (item) => item.label,
        dataSource:[{
            value: 'beijing',
            label: 'Beijing',
            children: [
                {
                    value: 'gugong',
                    label: 'Forbidden City'
                },
                {
                    value: 'tiantan',
                    label: 'Temple of Heaven'
                },
                {
                    value: 'wangfujing',
                    label: 'Wangfujing'
                }
            ]
        }, {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                        {
                            value: 'fuzimiao',
                            label: 'Confucius Temple',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    label: 'Suzhou',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            label: 'Humble Administrator\'s Garden',
                        },
                        {
                            value: 'shizilin',
                            label: 'Lion Grove Garden',
                        }
                    ]
                }
            ]
        }]
    }
}

Props Configuration Examples

Searchable

const rule = {
    type:"aTransfer",
    title:"User Selection",
    field:"users",
    modelField:"selectedKeys",
    value:[],
    props:{
        titles:['Available Users', 'Selected Users'],
        dataSource:[
            {value: '1', label: 'Zhang San'},
            {value: '2', label: 'Li Si'},
            {value: '3', label: 'Wang Wu'},
        ],
        showSearch: true,
        render: (item) => item.label,
    },
}

Custom Titles and Buttons

const rule = {
    type:"aTransfer",
    title:"Permission Assignment",
    field:"permissions",
    modelField:"selectedKeys",
    value:[],
    props:{
        titles:['Available Permissions', 'Selected Permissions'],
        operations: ['Add', 'Remove'],
        dataSource:[
            {value: 'view', label: 'View'},
            {value: 'edit', label: 'Edit'},
            {value: 'delete', label: 'Delete'},
        ],
        render: (item) => item.label,
    },
}

Events Examples

Listen to Selection Changes

const rule = {
    type:"aTransfer",
    title:"User Selection",
    field:"users",
    modelField:"selectedKeys",
    value:[],
    props:{
        dataSource:[
            {value: '1', label: 'Zhang San'},
            {value: '2', label: 'Li Si'},
        ],
        render: (item) => item.label,
    },
    on: {
        change: (targetKeys, direction, moveKeys) => {
            console.log('Right list changed:', targetKeys);
            console.log('Move direction:', direction);
            console.log('Moved keys:', moveKeys);
        },
        search: (direction, value) => {
            console.log('Search:', direction, value);
        },
    },
}

Count After Selection

const rule = [
    {
        type:"aTransfer",
        title:"User Selection",
        field:"users",
        modelField:"selectedKeys",
        value:[],
        props:{
            dataSource:[
                {value: '1', label: 'Zhang San'},
                {value: '2', label: 'Li Si'},
                {value: '3', label: 'Wang Wu'},
            ],
            render: (item) => item.label,
        },
        inject: true,
        on: {
            change: ($inject, targetKeys) => {
                // Automatically update selected count
                $inject.api.setValue('selectedCount', targetKeys.length);
            },
        },
    },
    {
        type:"input-number",
        field:"selectedCount",
        title:"Selected Count",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: Ant-design-vue_Transfer

Props

Parameter	Description	Type	Default
dataSource	Data source, data in it will be rendered to left column, except those specified in targetKeys.	[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}][]	[]
disabled	Whether disabled	boolean	false
filterOption	Receives inputValue and option as parameters. When option meets filter condition, should return true, otherwise return false.	(inputValue, option): boolean
footer	Can be set to a scoped slot	slot="footer" slot-scope="props"
listStyle	Custom styles for two transfer boxes	CSSProperties
locale	Various languages	object	{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'List is empty', searchPlaceholder: 'Search' }
oneWay	Display as one-way style	boolean	false
operations	Collection of operation text, order from top to bottom	string[]	['>', '<']
operationStyle	Custom style for operation bar	CSSProperties	-
pagination	Use pagination style, invalid when custom rendering list	boolean | { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean }	flase
render	Render function for each row of data, parameter is item in dataSource, return value is element. Or return a plain object, where label field is element, value field is title	Function(record)| slot
selectAllLabels	Collection of custom titles for top checkboxes	VueNode | ((info: { selectedCount: number; totalCount: number }) => VueNode)	-
selectedKeys(v-model)	Set which items should be selected	string[]	[]
showSearch	Whether to show search box	boolean	false
showSelectAll	Whether to show select all checkbox	boolean	true
status	Set validation status	'error' | 'warning'	-
targetKeys(v-model)	Collection of keys for data displayed in right box	string[]	[]
titles	Collection of titles, order from left to right	string[]	['', '']

Events

Event Name	Description	Callback Parameters
change	Callback function when options transfer between two columns	(targetKeys, direction, moveKeys): void
scroll	Callback function when option list scrolls	(direction, event): void
search	Callback function when search box content changes	(direction: 'left'|'right', value: string): void
selectChange	Callback function when selected items change	(sourceSelectedKeys, targetSelectedKeys): void

Render Props

Transfer supports receiving children to custom render list, and returns the following parameters:

{
  "direction": String,
  "disabled": Boolean,
  "filteredItems": Array,
  "selectedKeys": Array,
  "onItemSelect": Function,
  "onItemSelectAll": Function
}

Parameter	Description	Type
direction	Direction of rendered list	'left' | 'right'
disabled	Whether list is disabled	boolean
filteredItems	Filtered data	TransferItem[]
itemSelect	Select item	(key: string, selected: boolean)
itemSelectAll	Select a group of items	(keys: string[], selected: boolean)
selectedKeys	Selected items	string[]