Skip to content

Transfer 穿梭框

该组件是低代码平台中用于在两个列表之间转移数据项的表单项,基于 Element Plus 的 <el-transfer> 封装,适用于权限分配、角色配置、多选分组等场景,支持自定义标题、按钮文案、搜索过滤及异步数据加载,并深度集成表单容器(<el-form>)的数据绑定与校验体系。

基础属性

属性类型说明
列表元素排序策略 targetOrderenum控制右侧已选项的插入位置:
push:新选中的项添加到末尾(默认)
unshift:新选中的项添加到开头
左侧列表标题 leftTitlestring源数据区域的标题(如 "可选"
右侧列表标题 rightTitlestring已选数据区域的标题(如 "已选"
左侧按钮文案 leftButtonTextstring从右向左移动按钮的文本(如 "移回"
右侧按钮文案 rightButtonTextstring从左向右移动按钮的文本(如 "添加"
是否可搜索 filterableboolean在两侧列表顶部显示搜索框,用于过滤选项
搜索框占位符 filterPlaceholderstring搜索输入框的提示文字(仅当 filterable 启用时生效)
数据加载函数 loadDatafunction异步返回 { value, label, disabled } 格式的选项数组,用于初始化左侧源数据
表单项基础配置包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine

⚠️ 注意

  • 表单绑定值为右侧已选中项的 value 数组
  • disabled 字段可用于禁用某些选项不可被选中;
  • 搜索功能默认按 label 字段匹配。

高级属性

属性类型说明
表单项高级配置包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine

事件

事件触发时机说明
change右侧已选列表发生变化时返回当前选中的 value[] 数组