lay-text属性是Layui switch唯一控制显示文案的入口,必须显式声明为“开启|关闭”格式,用半角竖线分隔且不可含空格或全角符号;动态渲染需在templet中拼接,JS修改后须调用form.render('switch')生效。

lay-text 属性必须显式声明且用半角竖线分隔
layui 的 switch 不会自动读取 value、name 或后台传来的字段值来决定显示文案。它只认 lay-text 这个属性,而且必须写全、格式严格:左边是开启时显示的文本,右边是关闭时显示的文本,中间用**半角竖线 |** 隔开。
常见错误包括:
-
lay-text="是/否"(用了斜杠)→ 回退为默认ON|OFF -
lay-text="是,否"(用了逗号)→ 同样失效 -
lay-text="是"(只写一个)→ 缺失关闭态文案,直接回退 -
lay-text="是 | 否"(竖线两边带空格)→ 解析失败,文案不生效
正确写法只有这一种模式:lay-text="开启|关闭"、lay-text="是|否"、lay-text="上线|下线",支持中文、英文、长文本,但不能含全角符号或多余空格。
表格中 templet 里动态拼接 lay-text 要注意时机
在 table.render 的列配置中用 templet 渲染 switch 时,lay-text 不能写死成固定值(比如所有行都用 "启用|禁用"),除非你真要全局统一。如果不同行需不同文案(如“审核通过|驳回”、“VIP开通|取消”),得在模板里动态生成:
<script id="switchTpl" type="text/html">
<input type="checkbox" name="status"
value="{{d.status}}"
lay-skin="switch"
lay-text="{{d.type === 'audit' ? '通过|驳回' : '开通|取消'}}"
lay-filter="statusSwitch">
</script>注意两点:
- 必须确保
d.type等字段在table.cache中真实存在且类型正确,否则模板渲染会出空字符串,导致lay-text缺失而回退 - 模板中不要用全角竖线(|)、中文顿号(、)或换行,否则解析中断
JS 动态修改 lay-text 后必须调 form.render()
页面加载后想用 JS 改变已有 switch 的文字(比如根据用户权限切换“管理员启用|禁用”),不能只改 DOM 属性:
document.getElementById('mySwitch').setAttribute('lay-text', '允许|禁止');这样改了也没用——Layui 渲染完就不再监听该属性变化。必须手动触发重渲染:
form.render('switch'); // 仅重绘 switch 类型
// 或
form.render(); // 全局重绘(性能稍差,但更稳妥)常见疏漏点:
- 没等
form模块加载完成就调form.render()→ 报错form is not defined - 在表格异步加载(如分页、搜索)后新增的行里改了
lay-text,但忘了对新 DOM 补调form.render('switch')→ 新增行开关文案仍是旧的 - 多个 switch 共享同一
lay-filter,但只改了其中一个的lay-text,又只调了一次form.render('switch')→ 所有同 filter 的 switch 都被统一刷新为最后那个值
value 和 checked 的作用与文案无关
很多人误以为改 value="是" 或加 checked 就能影响显示文字,其实完全无关:
-
value只决定表单提交时该字段的值(如value="1"提交就是1),不影响界面文案 -
checked仅控制初始是否勾选,切换后状态由用户操作 +value字符串共同决定,也不参与文案渲染 - 即使
value="true"且checked,只要没写lay-text,文案还是ON|OFF
真正唯一可控的文案入口,只有 lay-text 属性本身。它不继承、不推导、不 fallback 到其他字段——写错或漏掉,就回归默认,没有中间态。


















