Transfer 穿梭框
该组件是低代码平台中用于在两个列表之间转移数据项的表单项,基于 Element Plus 的 <el-transfer> 封装,适用于权限分配、角色配置、多选分组等场景,支持自定义标题、按钮文案、搜索过滤及异步数据加载,并深度集成表单容器(<el-form>)的数据绑定与校验体系。
基础属性
| 属性 | 类型 | 说明 |
|---|---|---|
列表元素排序策略 targetOrder | enum | 控制右侧已选项的插入位置: • push:新选中的项添加到末尾(默认)• unshift:新选中的项添加到开头 |
左侧列表标题 leftTitle | string | 源数据区域的标题(如 "可选") |
右侧列表标题 rightTitle | string | 已选数据区域的标题(如 "已选") |
左侧按钮文案 leftButtonText | string | 从右向左移动按钮的文本(如 "移回") |
右侧按钮文案 rightButtonText | string | 从左向右移动按钮的文本(如 "添加") |
是否可搜索 filterable | boolean | 在两侧列表顶部显示搜索框,用于过滤选项 |
搜索框占位符 filterPlaceholder | string | 搜索输入框的提示文字(仅当 filterable 启用时生效) |
数据加载函数 loadData | function | 异步返回 { value, label, disabled } 格式的选项数组,用于初始化左侧源数据 |
| 表单项基础配置 | — | 包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine) |
⚠️ 注意:
- 表单绑定值为右侧已选中项的
value数组;disabled字段可用于禁用某些选项不可被选中;- 搜索功能默认按
label字段匹配。
高级属性
| 属性 | 类型 | 说明 |
|---|---|---|
| 表单项高级配置 | — | 包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine) |
事件
| 事件 | 触发时机 | 说明 |
|---|---|---|
change | 右侧已选列表发生变化时 | 返回当前选中的 value[] 数组 |
