transfer.getdata()返回右侧面板已选中项的完整数据对象数组,含value、title等原始字段;需用array.isarray()校验后map提取value并转字符串。

直接调用 transfer.getData(id),但返回的是带结构的对象数组,不是纯 value 字符串数组。这是最常被误解的地方——很多人以为它像 value 配置项一样返回 ["1", "2"],实际不是。
transfer.getData() 返回什么数据结构
它返回的是右侧面板当前所有已选中项的完整数据对象数组,每个对象包含 value、title、disabled 等原始字段(如果 data 源里有)。例如:
transfer.getData('authorTransfer')
// 返回类似:
[
{"value":"2","title":"杜甫","disabled":""},
{"value":"3","title":"苏轼","disabled":""}
]
注意:getData() 不受 disabled: "true" 影响——只要在右侧面板上显示了,就一定在返回结果里;但它不会返回“仅勾选但尚未移动过去”的左侧项。
如何安全提取纯 value 数组
不能直接用 JSON.stringify(value) 或 map(item => item.value) 就完事,得先确认返回值非空且是数组:
- 必须检查
getData()返回值是否为数组,否则在未渲染完成或 id 错误时可能返回undefined - 推荐用
Array.isArray()+map()提取,避免forEach后手动 push 的冗余写法 - 如果原始 data 中
value是数字类型(如{value: 2, title: "杜甫"}),getData()仍保持原类型,提取后需自行toString()才能和transfer.set()兼容
示例:
const rightData = transfer.getData('authorTransfer');
const rightValues = Array.isArray(rightData)
? rightData.map(item => String(item.value))
: [];
为什么 onchange 里拿到的值经常不准
onchange 回调参数是纯 value 字符串数组(如 ["2", "3"]),但它只反映“用户操作意图”,不保证 DOM 已同步完成。常见问题包括:
- 快速连点穿梭按钮时,
onchange可能触发多次,但中间某次的参数值还没来得及更新到 UI - 如果你在
onchange里立刻调用getData(),可能拿到上一帧的旧数据 - 禁用项(
disabled: "true")不会出现在onchange参数里,但会出现在getData()结果中(只要它已在右侧)
稳妥做法:把 onchange 当作信号,真正可信的数据来源是 transfer.set() 的入参,或在 setTimeout(() => { getData() }, 0) 中读取。
容易被忽略的兼容性细节
transfer.getData() 在 layui 2.5.0+ 才稳定支持;低于此版本会报 getData is not a function。另外:
-
id必须与transfer.render()时传入的id完全一致,不是 DOM 的id属性 - 如果初始化时没传
id,getData()将无法工作——它不支持无id实例的查找 - 同一页面多个穿梭框,
id冲突会导致getData()返回错误实例的数据
最保险的调试方式:先用 console.log(transfer) 看模块是否加载成功,再确认 render 调用后返回的实例有没有挂载 getData 方法。











