Transfer 穿梭框

<template>
    <div>
        <t-transfer
        :data="list"
        v-model="targetValue"
        :checked.sync="checked"
        @change="onChange"
        @checked-change="handleCheckedChange"
        />
    </div>
</template>
<script>
const list = [];
for (let i = 0; i < 20; i++) {
    list.push({
        value: i.toString(),
        label: `内容${i + 1}`,
        disabled: i % 4 > 2,
    });
}
export default {
    data() {
        return {
        list,
        targetValue: [],
        checked: ['2'],
        };
    },
    methods: {
        handleCheckedChange({
            checked, sourceChecked, targetChecked, type,
        }) {
            console.log('handleCheckedChange', {
                checked,
                sourceChecked,
                targetChecked,
                type,
            });
        },
        onChange(newTargetValue) {
            console.log(newTargetValue);
        },
    },
};
</script>

复制代码

<template>
  <div>
    <t-transfer theme="primary" :data="list" v-model="targetValue" :checked-value="checkedValue" :search="true" />
  </div>
</template>
<script>
const list = [];
for (let i = 0; i < 20; i++) {
    list.push({
        value: i.toString(),
        label: `内容${i + 1}`,
    });
}
export default {
    data() {
        return {
            list,
            targetValue: [],
            checkedValue: [],
        };
    },
};
</script>

复制代码

<template>
    <div>
        <t-transfer
        :data="items"
        v-model="targetValue"
        :checked.sync="checked"
        @change="onChange"
        @checked-change="handleCheckedChange"
        >
            <template v-slot:tree="slotProps">
                <t-tree :icon="icon" v-bind="slotProps" checkable hover expand-all transition />
            </template>
        </t-transfer>
    </div>
</template>
<script>
export default {
    data() {
        return {
        items: [
            {
            value: '1',
            label: '1',
            children: [
                {
                value: '1.1',
                label: '1.1',
                },
                {
                value: '1.2',
                label: '1.2',
                children: [
                    {
                    value: '1.2.1',
                    label: '1.2.1',
                    children: [
                        {
                        value: '1.2.1.1',
                        label: '1.2.1.1',
                        }
                    ],
                    },
                ],
                },
            ],
            },
            {
            value: '2',
            label: '2',
            children: [
                {
                value: '2.1',
                label: '2.1',
                },
                {
                value: '2.2',
                label: '2.2',
                },
            ],
            },
        ],
        targetValue: [],
        checked: [],
        };
    },
    methods: {
        handleCheckedChange({
        checked, sourceChecked, targetChecked, type,
        }) {
            console.log('handleCheckedChange', {
                checked,
                sourceChecked,
                targetChecked,
                type,
            });
        },
        onChange(newTargetValue) {
            console.log('onChange', newTargetValue);
        },
        icon(createElement, node) {
            let name = '';

            if (node.getChildren()) {
                if (node.expanded) {
                    name = 'care-icon-arrow-down-small';
                } 
                else {
                    name = 'care-icon-arrow-right-small';
                }
                return  <i slot="icon" class={name}></i>;
            }else {
                return  '';
            }
        },
    },
};
</script>

复制代码

# 穿梭框

# 基础穿梭框

# 带搜索框的穿梭框

# 与 Tree 结合使用