Transfer 穿梭框

规则

基础示例

const rule = {
    type: "elTransfer",
    field: "transfer",
    title: "穿梭框",
    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 配置示例

可搜索

const rule = {
    type: "elTransfer",
    field: "users",
    title: "用户选择",
    value: [],
    props: {
        data: [
            {label: '张三', key: '1'},
            {label: '李四', key: '2'},
            {label: '王五', key: '3'},
        ],
        filterable: true,
        filterPlaceholder: "请输入关键词搜索",
    },
}

自定义标题和按钮

const rule = {
    type: "elTransfer",
    field: "permissions",
    title: "权限分配",
    value: [],
    props: {
        data: [
            {label: '查看', key: 'view'},
            {label: '编辑', key: 'edit'},
            {label: '删除', key: 'delete'},
        ],
        titles: ['待选权限', '已选权限'],
        buttonTexts: ['添加', '移除'],
    },
}

自定义数据字段

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

Events 事件示例

监听选择变化

const rule = {
    type: "elTransfer",
    field: "users",
    title: "用户选择",
    value: [],
    props: {
        data: [
            {label: '张三', key: '1'},
            {label: '李四', key: '2'},
        ],
    },
    on: {
        change: (value, direction, movedKeys) => {
            console.log('右侧列表变化:', value);
            console.log('移动方向:', direction);
            console.log('移动的key:', movedKeys);
        },
        'left-check-change': (value, movedKeys) => {
            console.log('左侧选中变化:', value, movedKeys);
        },
        'right-check-change': (value, movedKeys) => {
            console.log('右侧选中变化:', value, movedKeys);
        },
    },
}

选择后统计数量

const rule = [
    {
        type: "elTransfer",
        field: "users",
        title: "用户选择",
        value: [],
        props: {
            data: [
                {label: '张三', key: '1'},
                {label: '李四', key: '2'},
                {label: '王五', key: '3'},
            ],
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 自动更新已选数量
                $inject.api.setValue('selectedCount', value.length);
            },
        },
    },
    {
        type: "input-number",
        field: "selectedCount",
        title: "已选数量",
        props: {
            disabled: true,
        },
    },
]

完整配置项:Element_Transfer

value :Array

Props

属性名	说明	类型	默认值
data	Transfer 的数据源	object	[]
filterable	是否可搜索	boolean	false
filterPlaceholder	搜索框占位符	string	—
filterMethod	自定义搜索方法	Function	—
targetOrder	右侧列表元素的排序策略： 若为 original，则保持与数据源相同的顺序； 若为 push，则新加入的元素排在最后； 若为 unshift，则新加入的元素排在最前	enum	original
titles	自定义列表标题	object	[]
buttonTexts	自定义按钮文案	object	[]
renderContent	自定义数据项渲染函数	object	—
format	列表顶部勾选状态文案	object	{}
props	数据源的字段别名	object	—
leftDefaultChecked	初始状态下左侧列表的已勾选项的 key 数组	object	[]
rightDefaultChecked	初始状态下右侧列表的已勾选项的 key 数组	object	[]
validateEvent	是否触发表单验证	boolean	true

Events

事件名	说明	类型
change	右侧列表元素变化时触发	Function
left-check-change	左侧列表元素被用户选中 / 取消选中时触发	Function
right-check-change	右侧列表元素被用户选中 / 取消选中时触发	Function

Slots

插槽名	说明
default	自定义数据项的内容， 参数为 { option }
left-footer	左侧列表底部的内容
right-footer	右侧列表底部的内容
left-empty	左侧面板为空或没有数据符合筛选条件时的内容
right-empty	右侧面板为空或没有数据符合筛选条件时的内容