Transfer 穿梭框

规则

基础示例

const rule = {
    type: "transfer",
    field: "transfer",
    title: "穿梭框",
    value: [],
    props: {
        data:[{
            value: 1,
            label: '内容1',
            disabled: false
        },{
            value: 2,
            label: '内容2',
            disabled: true
        },{
            value: 3,
            label: '内容3',
            disabled: false
        },]
    },
}

Props 配置示例

自定义标题

const rule = {
    type: "transfer",
    field: "transfer",
    title: "权限分配",
    value: [],
    props: {
        data: [
            { value: 1, label: '查看用户' },
            { value: 2, label: '编辑用户' },
            { value: 3, label: '删除用户' },
        ],
        titles: ['待分配', '已分配'],
        search: true,
    },
}

搜索功能

const rule = {
    type: "transfer",
    field: "transfer",
    title: "权限分配",
    value: [],
    props: {
        data: [
            { value: 1, label: '查看用户' },
            { value: 2, label: '编辑用户' },
        ],
        search: true,
        searchProps: {
            placeholder: "搜索权限",
        },
    },
}

Events 事件示例

监听穿梭变化

const rule = {
    type: "transfer",
    field: "transfer",
    title: "权限分配",
    value: [],
    props: {
        data: [
            { value: 1, label: '查看用户' },
            { value: 2, label: '编辑用户' },
        ],
    },
    on: {
        change: (value, context) => {
            console.log('右侧列表变化:', value);
            console.log('移动方向:', context.direction);
        },
    },
}

穿梭后统计数量

const rule = [
    {
        type: "transfer",
        field: "transfer",
        title: "权限分配",
        value: [],
        props: {
            data: [
                { value: 1, label: '查看用户' },
                { value: 2, label: '编辑用户' },
            ],
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 自动更新已选数量
                $inject.api.setValue('selectedCount', value.length);
            },
        },
    },
    {
        type: "input",
        field: "selectedCount",
        title: "已选权限数",
        props: {
            disabled: true,
        },
    },
]

完整配置项:TDesign_Transfer