为什么直接改 CSS 不够
很多项目引入 layui 后,第一反应是覆盖 .layui-table 或 .layui-btn 的样式。短期有效,但遇到动态列、条件行样式、自定义弹层结构时,CSS 就无能为力了。真正的 layui模板定制,要同时控制结构、样式和渲染逻辑。
先理解 laytpl 模板引擎
layui 内置的 laytpl 是模板定制的核心。它语法简洁:
{{ d.field }}输出变量{{# if(d.status===1){ }}执行逻辑{{! d.content !}}不转义输出
定制表格列时,把 templet 写成函数或模板字符串,就能让同一列根据数据渲染出不同按钮、标签或进度条。这是最常用的切入方式。
表格模板定制的三个层次
1. 列级模板
在 cols 中为需要定制的列加 templet,返回 HTML 字符串。适合状态标签、操作按钮组、单元格内多行展示。
2. 行级模板
通过 done 回调遍历 tr,根据行数据给整行加类名。适合实现“逾期标红”“选中高亮”等效果,避免用 CSS 选择器硬猜。
3. 工具栏模板
toolbar 和 defaultToolbar 支持传入自定义模板。把新增、批量删除、导出等按钮做成模板,统一交互风格,也便于权限控制。
表单与弹层的模板化
表单定制重点在 layui.form.render() 的时机和自定义验证规则。把常用校验(手机号、身份证、金额)注册成规则,比在每个页面重复写 lay-verify 更可靠。
弹层 layer.open() 的 content 支持传入 DOM 或模板渲染后的 HTML。建议把弹层内容抽成独立模板片段,通过 laytpl 渲染后传入,避免在 JS 里拼接大段字符串。
模块化扩展建议
layui 支持用 layui.define 扩展模块。把项目里反复出现的模板(如用户卡片、订单状态条)封装成独立模块,通过 layui.use 调用。这样模板定制从“每页改”变成“一处改,处处用”。
同时建议建立自己的 layui.config 路径映射,把定制样式和扩展模块集中管理,升级 layui 版本时冲突更少。
注意版本差异
layui 2.x 与 3.x 在模块加载和部分 API 上有差异。定制前先确认版本,尤其是 table.render 的 templet 写法和 laytpl 的解析规则。跨版本迁移时,优先检查模板字符串中的转义符号。
小结
layui模板定制的关键路径是:用 laytpl 控制渲染,用回调控制行为,用模块封装复用。只改 CSS 只能解决表面问题,把模板逻辑管起来,才能让中后台界面既统一又灵活。

