Layui穿梭框title参数必须传入长度为2的数组,首项为左侧标题、次项为右侧标题,不支持字符串、对象或单值;错误类型会导致默认标题回退,动态修改需手动操作DOM节点。

直接用 title 参数传入长度为 2 的数组,第一个元素是左侧标题,第二个是右侧标题,没有其他绕路方式。
title 参数必须是长度为 2 的数组
layui 的 transfer.render() 不接受字符串、对象或单个值。传错类型会导致标题不显示,或两侧都显示默认的 ['标题一', '标题二']。
-
title: ['待选项目', '已选项目']✅ 正确写法 -
title: '待选/已选'❌ 渲染失败,控制台无报错但标题不变 -
title: ['左侧']❌ 右侧标题回退为默认值'标题二' -
title: null或title: undefined❌ 完全使用默认值
标题内容支持 HTML 实体和简单内联样式
虽然文档没明说,但实测 title 数组项中可写 、(图标字符)甚至 <span style="color:#ff5722">必填</span> —— layui 不做转义,原样插入 DOM。但别塞复杂结构,否则可能撑破容器。
- 常用轻量增强:
title: ['<i class="layui-icon"></i> 候选项', '已启用 <small>(4)</small>'] - 避免:
title: ['<div>...</div>', '...'],会破坏布局流
动态修改标题得靠 DOM 操作,不是重新 render
transfer.render() 是一次性初始化,之后改 title 配置无效。要换标题,得手动更新对应 DOM 节点:
- 左侧标题:找到
.layui-transfer-header .layui-transfer-title:first-child - 右侧标题:找
.layui-transfer-header .layui-transfer-title:last-child - 示例:
document.querySelector('.layui-transfer-header .layui-transfer-title:first-child').innerText = '新左侧名';
注意:如果穿梭框被重载(如调用 transfer.reload()),标题会被重置为初始化时的 title 值,所以动态改完最好存个标记,reload 后再补一次。
真正容易被忽略的是:标题文本在响应式缩放或字体加载延迟时可能错位——建议给 .layui-transfer-header 加 line-height 和 vertical-align: middle 微调,不然小屏幕下文字会贴着上边框。


















