Layui穿梭框（transfer）如何初始化数据-Layui教程-PHP中文网

初始化 layui.transfer 数据不显示，需确保 data 为含 value 和 title 的对象数组；默认选中由 value 数组控制，须与 data 中 value 严格匹配；动态更新用 setData 或先保存再恢复 value。

初始化 `layui.transfer` 时数据不显示？检查数据格式是否为数组且含 `value` 和 `title`

穿梭框不显示任何选项，大概率是传入的 data 格式不对。它不接受对象数组以外的结构，尤其不能是纯字符串或数字数组，也**不自动映射字段**。

data 必须是数组，每一项必须是对象，且至少包含 value（唯一标识）和 title（显示文本）两个键
如果后端返回的是 [{"id": 1, "name": "苹果"}]，得先手动映射：data.map(item => ({value: item.id, title: item.name}))
空数组 [] 或 null 会导致右侧“已选”区空白且无提示，但不会报错——容易误以为初始化失败

如何让某些项默认出现在右侧（已选区）？用 `value` 数组匹配 `data` 中的 `value`

穿梭框的「初始选中状态」完全由 value 参数控制，不是靠设置 data 里的某个字段。它只认值，不认顺序、不认嵌套。

value 必须是字符串或数字组成的数组，如 ['user_1', 'user_3']
这个数组里的每个值，必须严格等于 data 中某一项的 value 字段（类型也要一致，"1" ≠ 1）
如果 value 里有值在 data 中找不到，对应项会被忽略，不会报错也不会警告

示例：

layui.transfer.render({
  elem: '#demo',
  data: [
    {value: 'a', title: '选项A'},
    {value: 'b', title: '选项B'}
  ],
  value: ['a'] // 只有 A 出现在右侧
});

动态更新穿梭框数据后，已选项丢失？别直接改 `data`，要重 render 或用 `setData`

直接修改原始 data 数组再调一次 render()，会导致已选状态清空——因为 render 是全新实例化，旧的 value 没带过去。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

方案一：调用实例方法 setData（Layui 2.8+ 支持），它保留当前选中状态：transferIns.setData(newData)
方案二：手动保存当前 value，重 render 后再 set：const val = transferIns.getValue(); layui.transfer.render({...}); transferIns.setValue(val);
注意：transferIns 是 render() 返回的对象，必须存下来，否则拿不到实例
低版本 Layui（setData，只能走方案二

为什么设置了 `width` / `height` 没生效？样式优先级被内置 CSS 覆盖了

穿梭框容器宽高由内联 style 控制，但 Layui 的 CSS 里用了 !important 锁死部分尺寸，直接写 width: 500px 很可能无效。

推荐改法：用 elem 指向一个已有 class 的 <div>，然后在 CSS 里加权重：<code>.my-transfer .layui-transfer-box { width: 500px !important; }
height 同理，但注意：高度影响的是左右两个面板整体，不是单个选项；单个选项高度由 line-height 和内边距决定
别在 render 配置里写 style 对象——它只支持 width 和 height 两个 key，且兼容性差

value

title

value