transfer.getData()返回对象数组,需用map提取value;done回调直接提供最新value数组,是监听右侧变化的唯一可靠方式。
transfer.getData() 返回的是对象数组,不是纯 value 数组
调用 transfer.getdata(id) 会返回右侧当前所有已选中项的完整对象(含 value、title、disabled 等字段),而不是你常需要的字符串 ["1", "2"] 形式。直接拿这个结果去提交表单或比对权限,大概率出错。
常见错误是写成:JSON.stringify(transfer.getData('myTransfer')),结果提交了一堆冗余字段,后端解析失败。
- 正确提取纯 value:用
transfer.getData('myTransfer').map(item => item.value) - 注意:如果右侧为空,
getData()返回空数组[],不是null或undefined - 该方法不触发重绘,可安全在任何时机调用(比如按钮点击时)
想实时监听右侧变化?别用 onchange,用 done 回调
transfer.render 配置里的 done 是唯一稳定可用的响应点,它在每次左右移动、初始化、set() 后都会触发,并直接传入最新 value 字符串数组 —— 这才是你真正要的“右侧已选数据”。
很多人误绑 click 到箭头图标上,结果双击转移、全选转移都漏掉,且多次渲染后事件重复绑定。
-
done: function(value, elem) { console.log('当前右侧值:', value) }——value就是你要的数组 - 不要在
done里再调getData(),纯属多余,还可能因 DOM 渲染延迟拿到旧值 - 首次触发时
value是初始化value配置项的值;后续每次都是真实最新状态
动态设置右侧数据后,getData() 仍需等 set 完成才准确
用 transfer.set(id, ['2', '4']) 更新右侧后,getData() 不会立刻反映新值 —— 实际上它同步返回,但 DOM 渲染有微小延迟。如果你紧接着做 UI 同步(比如更新隐藏域),可能看到旧状态。
这不是 bug,而是组件内部异步渲染机制导致的视觉与数据轻微不同步。
- 稳妥做法:把
set()的参数当成“事实来源”,UI 状态按此反推,而非依赖getData()结果 - 真要等 DOM 更新完:用
requestAnimationFrame(() => { /* 读取或操作 DOM */ }) - 禁用项(
disabled: true)会被set()自动过滤,即使你传进去也不会出现在右侧 —— 这是预期行为,不是 getData 失效
右侧 checkbox 点击事件不能靠 jQuery 直接监听
有人写 $('.layui-transfer-data input[type=checkbox]').on('change', ...) 想捕获单个勾选,这在多次 render() 后会失效,因为 DOM 被重建,事件绑定丢失;而且无法区分是用户点击还是程序 set() 触发的勾选。
更麻烦的是,Layui 内部用的是事件委托,原生 checkbox 的 change 并不总能准确冒泡到你绑的位置。
- 唯一可靠路径:坚持用
done回调,它覆盖所有变更入口(箭头、双击、全选、set) - 若必须响应单个点击(比如弹窗确认),应在
done中比对前后value差异,找出新增/移除项 - 不要碰
.layui-transfer-active或.layui-transfer-data这类内部 class 做 DOM 遍历,版本升级可能改名
实际开发中最容易被忽略的,是 done 回调里那个 value 参数——它已经是你需要的最终结果,却总有人绕一圈再去调 getData(),既多一次遍历,又引入潜在延迟。


















