组件
穿梭框 Transfer
Transfer:穿梭框。条目先留在源列表,使用者勾选后移动到目标列表,也可以按同样方式移回。`modelValue` 是目标列表的值数组;`data` 中其余内容留在左侧。`searchable` 会在每个面板中加入过滤输入框。
#基础用法
In the study4
On exhibition1
<script setup lang="ts">
import { Transfer, type TransferItem } from "@bysages/vue";
import { ref } from "vue";
const data: TransferItem[] = [
{ label: "The brush inventory", value: "brush" },
{ label: "Stone seals, catalogued", value: "seals" },
{ label: "Xuan paper samples", value: "xuan", disabled: true },
{ label: "Silk mounting orders", value: "silk" },
{ label: "Ink grind records", value: "ink" },
];
const picked = ref(["ink"]);
</script>
<template>
<Transfer v-model="picked" :data="data" :titles="['In the study', 'On exhibition']" searchable />
</template>
#属性
#Transfer
Transfer:穿梭框。条目先留在源列表,使用者勾选后移动到目标列表,也可以按同样方式移回。modelValue 是目标列表的值数组;data 中其余内容留在左侧。searchable 会在每个面板中加入过滤输入框。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
modelValue | Array as PropType<string[]> | () => [] | — |
data | Array as PropType<TransferItem[]> | — | |
titles | Array as PropType<string[]> | () => ["Source", "Target"] | — |
searchable | Boolean | false | — |
disabled | Boolean | false | — |