讲师中心 微信公众号
AI工具推荐 视频效率加速

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

星涛酱_5948

星涛酱_5948

发布时间:2026-10-27 07:24:34

|

567人浏览过

|

来源于php中文网

原创

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>

注意两点:

Model Switcher
Model Switcher

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

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

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

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

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

2683

2023.08.11

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

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

5803

2023.10.09

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

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

6770

2024.03.19

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

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

6498

2024.03.22

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

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

923

2024.05.22

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

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

80

2026.10.22

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

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

40

2026.10.22

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

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

60

2026.10.22

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

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

20

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

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

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn