templet中需写成function(d, data)并用data.indexOf(d)+1获取序号;若后端已提供serial等字段应直接使用,避免前端计算导致分页筛选错位。
templet 中直接用 index 会报错,因为不是自动注入的
layui 的 templet 函数里默认不传入行号 index,只传 d(当前数据对象)和 data(整张表原始数据数组)。很多人写 index + 1 直接报 index is not defined 就卡在这儿。
解决办法是:在 col 配置中显式声明 index 参数,通过 layui.table.cache 或 data 数组下标反查——但最稳的方式是利用 data 参数本身:
-
data是表格渲染前的原始数组,顺序与界面一致 - 用
data.indexOf(d)可得当前行在原始数据中的位置(即真实 index) - 注意:如果启用了前端分页或排序,
data是当前页/当前排序后的数据,此时indexOf仍有效 - 若需全局序号(无视分页),得提前在请求后端数据时加字段,或用
lay-id+ 全局计数器(不推荐)
templet 函数里怎么写才能拿到正确 index
必须把 templet 写成函数形式,不能用字符串模板;并在函数签名中接收 d 和 data 两个参数:
templet: function(d, data) {
var idx = data.indexOf(d) + 1; // +1 是为了显示从 1 开始的序号
return '<span class="serial">' + idx + '</span>';
}
关键点:
- 一定要写成
function(d, data),不能漏掉data参数,否则data是undefined -
data.indexOf(d)依赖对象引用相等,只要没深拷贝d,就可靠 - 如果表格启用了
id字段且唯一,也可用data.findIndex(item => item.id === d.id)更稳妥
用 lay-index 属性取不到实时 index?
有人尝试在 templet 里读 DOM 的 lay-index 属性:$(this).attr('lay-index'),这在渲染时不可行——因为 templet 是字符串生成阶段,DOM 还没插入,this 指向也非目标元素。
更糟的是,Layui 2.8+ 中 lay-index 值实际是「内部缓存索引」,可能跳变(比如删行后重排),并不严格等于视觉行号。
- 不要在
templet函数里操作 DOM 或依赖lay-index - 如真需 DOM 级索引,应在
done回调里遍历tr补充data-index - 但这类需求通常说明设计有冗余——序号逻辑应由数据层驱动,而非视图层推导
服务端已带序号字段,还用前端算 index 吗
如果后端返回的数据里已有 serial、row_num 或类似字段,**直接用它,别再算 index**。原因很实在:
- 前端计算的
index在搜索、筛选、分页切换时容易错位(尤其配合page: false时) - 后端序号能保证全局唯一、稳定,适合导出、打印、审计等场景
- Layui 表格对字段名无限制,
d.serial和d.index都可直接用 - 若后端没提供,再考虑前端补,优先用
data.indexOf(d) + 1,别手写计数器
真正容易被忽略的是:当表格开启 height(虚拟滚动)时,data 参数在 templet 中依然可用,但部分旧版 Layui(≤2.5.6)存在 data 传参丢失 bug,务必升级到 2.8+ 或手动 patch。


















