Transfer 穿梭框

双栏列表 + 勾选移动，数据分区与移动逻辑在 core 层以不可变方式完成。双栏均为 role="listbox"（APG listbox pattern）。

基础用法

基础用法

列表一1 / 3

• 甲

列表二2 / 3

• 乙
• 丙

<script setup>
import { ref } from 'vue'
const source = ref(['a'])
const items = [
  { key: 'a', label: '甲' },
  { key: 'b', label: '乙' },
  { key: 'c', label: '丙', disabled: true },
]
</script>

<template>
  <LhTransfer :data="items" v-model="source" />
</template>

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: '甲' },
        { key: 'b', label: '乙' },
        { key: 'c', label: '丙', disabled: true },
      ],
    }
  },
}
</script>

<template>
  <LhTransfer :data="items" v-model="source" />
</template>

禁用

disabled 禁用整个穿梭框。

禁用穿梭框

列表一1 / 3

• 甲

列表二2 / 3

• 乙
• 丙

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

const source = ref(['a'])
const items = [
  { key: 'a', label: '甲' },
  { key: 'b', label: '乙' },
  { key: 'c', label: '丙', disabled: true },
]
</script>

<template>
  <LhTransfer :data="items" v-model="source" disabled />
</template>

<script>
export default {
  data() {
    return {
      source: ['a'],
      items: [
        { key: 'a', label: '甲' },
        { key: 'b', label: '乙' },
        { key: 'c', label: '丙', disabled: true },
      ],
    }
  },
}
</script>

<template>
  <LhTransfer :data="items" v-model="source" disabled />
</template>

API

LhTransfer Props

属性名	说明	类型	默认值
data	全量数据	[LhTransferItem](#type-LhTransferItem)[]	—
modelValue	左侧（源）键列表（受控 v-model）	(string | number)[]	() => []
disabled	禁用	boolean	false
sx	sx 快速布局属性	LhSxProps	—

Events

事件名	说明	回调参数
update:modelValue	右侧（目标）键列表变化时触发，配合 v-model 使用	(keys: Array<string | number>)
change	数据移动完成后触发	(keys: Array<string | number>, direction: 'left-to-right' | 'right-to-left')

LhTransferItem

字段	说明	类型
key	唯一键	string | number
label	显示文本	string
disabled	禁用（不可移动）	boolean

无障碍

• 双栏均为 role="listbox" + aria-multiselectable，项为 role="option" + aria-selected / aria-disabled
• 移动按钮为真实 <button> 且带命名（移到左侧 / 移到右侧）；全选为原生 checkbox（半选态真实 indeterminate）
• 每侧独立的搜索框带 aria-label；禁用项全链路拦截（勾选、全选、移动）

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/transfer/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhTransferProps

export interface LhTransferProps {
  /** 全量数据 */
  data: LhTransferItem[]
  /** 左侧（源）键列表（受控 v-model） */
  modelValue?: Array<string | number>
  /** 禁用 */
  disabled?: boolean
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhTransferSide _{（来自 @lh-ui/share/core/transfer）}

/** 面板侧别 */
export type LhTransferSide = 'left' | 'right'

LhTransferItem _{（来自 @lh-ui/share/core/transfer）}

/** 穿梭框数据项 */
export interface LhTransferItem {
  /** 唯一键 */
  key: string | number
  /** 显示文本 */
  label: string
  /** 禁用（不可移动） */
  disabled?: boolean
}