transfer.render 后无法直接修改 value 属性,必须通过 transfer.set(id, valueArr) 更新右侧数据,id 需与初始化时一致,valueArr 须为合法字符串数组且值存在于原始 data 中。
transfer.render 后无法直接修改 value 属性
渲染完成后,transfer.render 返回的实例不提供 setvalue 或类似方法;你不能通过重新设置 value 选项来“刷新”右侧数据。这是初学者最常误踩的点——以为改了配置对象里的 value 数组再调用一次 render 就能更新,实际会报错或无反应,因为 render 是一次性初始化操作,重复调用会导致 dom 冲突或实例重复注册。
正确做法:用 transfer.getData() + transfer.set()
transfer.getData() 只读取当前右侧已选中的原始数据项(含 value、title 等字段),但它不返回纯 value 字符串数组;你需要自己提取。而真正用于“写入”的是 transfer.set() 方法,它接受一个字符串数组作为新右侧值列表:
-
transfer.set(id, valueArr)中id必须与初始化时传入的id参数完全一致(不是 DOM ID,是配置里的id: 'demo1') -
valueArr必须是字符串数组,如["2", "4"],且每个值必须存在于原始data的value字段中 - 调用前确保
layui.transfer模块已加载,且set方法在 layui 2.5.0+ 才可用
示例:
const transfer = layui.transfer;
transfer.render({
elem: '#test1',
data: [
{"value": "1", "title": "李白"},
{"value": "2", "title": "杜甫"},
{"value": "3", "title": "苏轼"}
],
id: 'authorTransfer' // 注意这个 id,后面 set 时必须用它
});
// 后续动态设右侧为 ["2", "3"]
transfer.set('authorTransfer', ["2", "3"]);
监听 onchange 并做副作用处理时别漏掉异步时机
onchange 回调触发时,DOM 更新尚未完成,如果你立即调用 transfer.getData(),可能拿到旧值。尤其在快速连续点击穿梭按钮时容易出错:
- 不要在
onchange里直接依赖getData()结果做 UI 同步(比如更新隐藏域) - 需要确保 DOM 渲染完毕,可用
setTimeout(() => { ... }, 0)或requestAnimationFrame包裹 - 更稳妥的做法是:把
onchange当作“意图通知”,实际数据以set调用为准,UI 状态从set的参数反推
禁用项(disabled)会影响 set 行为
如果原始 data 中某条目设置了 "disabled": "true",即使你把它包含在 set() 的数组里,它也不会出现在右侧面板中——组件会静默过滤掉。这不是 bug,是设计行为。
- 检查原始数据中是否误加了
disabled字段(空字符串""是允许的,但"true"或true会被识别为禁用) - 动态更新前,建议先用
transfer.getData('authorTransfer')拿全量右侧数据,再比对你要 set 的数组,提前剔除非法项 - 注意:Layui 不校验
set数组是否全在data中,缺失的value会被忽略,也不报错
set() 是唯一可靠入口,但它的有效性完全依赖初始化时的 id 和原始 data 结构一致性。











