layui switch怎么设置开启和关闭时显示的文字(如是/否)

星涛酱_5948

星涛酱_5948

2026-10-27

567人浏览

原创

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

layui 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 属性:

Model Switcher
Model Switcher

根据任务复杂度自动切换不同的AI模型。支持OpenClaw设置中的所有可用模型。当检测到复杂...

下载
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 到其他字段——写错或漏掉,就回归默认,没有中间态。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2683

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5803

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6770

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6498

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

923

5

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

80

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

40

10

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

2026.10.22

40

15

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

2026.10.22

20

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP基础入门课程
PHP基础入门课程

共33课时 | 3.5万人学习

前端系列快速入门课程
前端系列快速入门课程

共4课时 | 0.5万人学习

ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习