Layui表格templet必须写成函数并返回HTML字符串,参数d为当前行数据对象,需手动解构、判空、拼接;直接写字符串模板或{{}}语法无法执行逻辑判断,且时间戳等需自行转换格式。
layui table 的 templet 参数怎么写才生效
必须用函数返回字符串,不能直接写 html 字符串(除非是简单文本)。layui 会把当前行数据对象传入该函数,你得手动解构、处理、拼接。
-
templet值为函数时,参数是data对象,比如data.create_time是时间戳,你要自己转成日期 - 如果写成
templet: '<div>{{d.create_time}}</div>',它不会自动格式化,只会原样输出数字 - 推荐用
laydate.render()提供的laydate.now()或laydate.parse(),但更轻量的做法是直接用 JSnew Date().toLocaleString()或自定义格式化函数
时间戳转「YYYY-MM-DD HH:mm:ss」的常用写法
别依赖后端返回格式化后的字符串——前端控制更灵活,也避免时区错乱。Layui 表格列定义里这样写:
{field: 'create_time', title: '创建时间', templet: function(d){
if(!d.create_time) return '-';
var date = new Date(d.create_time * 1000); // 注意:秒级时间戳要 ×1000
return date.getFullYear() + '-' +
(date.getMonth() + 1).toString().padStart(2, '0') + '-' +
date.getDate().toString().padStart(2, '0') + ' ' +
date.getHours().toString().padStart(2, '0') + ':' +
date.getMinutes().toString().padStart(2, '0') + ':' +
date.getSeconds().toString().padStart(2, '0');
}}- 务必判断
d.create_time是否为空,否则new Date(null)会变成 Invalid Date,页面可能报错或显示 NaN - 区分秒级(10位)和毫秒级(13位)时间戳:后端常用秒级,JS
Date要毫秒,所以乘 1000 - 用
padStart(2, '0')补零比date.getMonth()+1 < 10 ? '0'+... : ...更简洁可靠
用 layui.use(['laydate'], fn) 配合格式化是否必要
不必要。laydate 模块只在需要选日期组件时才加载;单纯格式化字符串,用原生 JS 完全够用,还能避免模块加载失败导致表格渲染中断。
- 如果你已在页面全局引入
laydate,且习惯用laydate.format(new Date(), 'yyyy-MM-dd HH:mm:ss'),也可以,但要注意:这个方法不是所有 Layui 版本都内置,v2.8+ 才稳定支持 - 不要在
templet函数里反复调用laydate.render()—— 这是初始化日历控件的方法,跟格式化无关,用了反而报错 - 复杂格式需求(如相对时间「2小时前」)建议抽成独立工具函数,避免模板里逻辑过重
为什么改了 templet 但页面没变化
常见三个原因:缓存、未重载表格、字段名写错。
- 检查浏览器控制台有没有
Uncaught TypeError: Cannot read property 'xxx' of undefined—— 很可能是d.xxx字段名和实际返回的 JSON 不一致(比如后端返回created_at,你写了d.create_time) - 改完 JS 后没刷新表格:调用
table.reload('id')或整个重新table.render(),仅改代码不触发重绘 - 使用了浏览器缓存,特别是本地文件打开时,尝试清空缓存或加版本号参数(
src="layui.js?v=2.8.18")
Layui 表格的列格式化本质就是「对每行数据做一次 JS 处理」,关键在于函数体里别漏判空、别搞错时间戳单位、别把模板逻辑和 UI 组件初始化混在一起。真正容易被忽略的是:后端字段名和前端 d.xxx 的映射关系,一不一致就静默失败,连报错都不给。


















