Fes Design

Transfer 穿梭框 ​

主要用于多组数据操作的场景中，当一组数据和另一组数据可以相互交换内容，或从一组数据选择其中部分数据组成一组新的数据组时，可使用穿梭框来实现。

组件注册 ​

js
import { FTransfer } from '@fesjs/fes-design';

app.use(FTransfer);

代码演示 ​

基础用法 ​

当内容只需单项穿梭时，可用此组件完成操作，此组件属于排列组合型

play
<template>
    <FTransfer :options="options" :style="{ width: '520px' }" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const options = ref(
    new Array(10)
        .fill(null)
        .map((_, index) => ({ label: `Option ${index + 1}`, value: index })),
);
</script>

双向穿梭 ​

当数据可进行相互交换时，可用此组件完成操作，此组件属于离散重组型

play
<template>
    <FTransfer twoWay :options="options" :style="{ width: '520px' }" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const options = ref(
    new Array(10)
        .fill(null)
        .map((_, index) => ({ label: `Option ${index + 1}`, value: index })),
);
</script>

搜索 ​

可在穿梭框中配置过滤条件

play
<template>
    <FSpace vertical>
        <FTransfer
            filterable
            :options="options1"
            :style="{ width: '520px', height: '502px' }"
        />
        <FTransfer
            twoWay
            filterable
            :options="options2"
            :style="{ width: '520px', height: '502px' }"
        />
    </FSpace>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const createOptions = (num = 12) =>
    new Array(num)
        .fill(null)
        .map((_, index) => ({ label: `Option ${index + 1}`, value: index }));

const options1 = ref(createOptions());
const options2 = ref(createOptions());
</script>

固定高度 ​

指定 height 属性，固定组件高度

play
<template>
    <FForm>
        <FFormItem label="开启过滤">
            <FSwitch v-model="filterable" />
        </FFormItem>
    </FForm>
    <FTransfer
        :options="options"
        :twoWay="false"
        :filterable="filterable"
        :height="400"
        :style="{ width: '520px' }"
    />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const filterable = ref<boolean>(true);

const options = ref(
    new Array(50)
        .fill(null)
        .map((_, index) => ({ label: `Option ${index + 1}`, value: index })),
);
</script>

树形结构 ​

仅在单向穿梭框生效

play
<template>
    <FTransfer :options="options" :style="{ width: '520px' }" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const LABEL_MAP = [undefined, '三生万物', '二生三', '一生二', '道生一'];

const createData = (level = 1, prefix = '') => {
    if (!level) {
        return undefined;
    }
    return new Array(2).fill(null).map((_, index) => {
        const key = [prefix, level, index].join('');
        return {
            label: LABEL_MAP[level],
            value: key,
            children: createData(level - 1, key),
            checkable: level % 2 !== 0,
        };
    });
};

const options = ref(createData(4));
</script>

自定义标签内容 ​

play
<template>
    <FTransfer :options="options" :style="{ width: '520px' }">
        <template #label="{ option }">
            <div :style="{ display: 'flex', alignItems: 'center' }">
                <UserManagementOutlined :style="{ marginRight: '4px' }" />
                <span> {{ option.label }}</span>
            </div>
        </template>
    </FTransfer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const options = ref(
    new Array(10)
        .fill(null)
        .map((_, index) => ({ label: `Staff ${index + 1}`, value: index })),
);
</script>

Props ​

属性说明类型默认值
v-model选中的值(string | number)[][]
options选项TransferOption[][]
twoWay开启双向模式booleanfalse
filterable开启过滤booleanfalse
filter过滤函数(text: string, option: TransferOption) => boolean-
height固定高度number-

TransferOption ​

属性说明类型require
value选项的值string | number必填
label选项的标签string必填
disabled是否禁用boolean
checkable是否显示 checkboxboolean
children子选项（用于树形结构）TransferOption[]

Slots ​

名称说明参数
label自定义标签内容{ option: TransferOption }

Events ​

事件名称说明回调参数
change因交互引起 v-model 值变化时触发{ nextValue: (string | number)[] }