layui table 默认不支持自动序号列,2.8+ 可用 type: 'numbers' 实现跨页正确序号,低版本需在 templet 中结合 page 和 limit 手动计算;服务端返回序号不可取,树形表格需手动 templet 过滤子行。

layui table 默认不支持自动序号列,得手动加
layui 的 table.render() 不像某些 UI 库那样内置 index 列或 rowNum 配置。所谓“序号列”,本质是靠 templet 函数动态计算行号——但要注意:这个行号不是数据本身的索引,而是当前页的视觉序号(即第 1 页显示 1–10,第 2 页从 11 开始),必须结合分页参数手动算。
用 templet + page 和 limit 算真实序号
直接在列定义里写 templet: function(d) { return d.LAY_TABLE_INDEX + 1; } 是错的——LAG_TABLE_INDEX 是从 0 开始的当前页内序号,翻页后就重置。正确做法是读取表格实例的分页信息:
table.render({
elem: '#demo',
url: '/api/list',
page: true,
cols: [[
{ type: 'numbers' }, // ✅ 这个是 layui 2.8+ 新增的快捷写法,等价于下面的手动 templet
// 或者手动写:
// { title: '序号', width: 60, templet: function(d) {
// const page = table.cache['demo'].page || 1;
// const limit = table.cache['demo'].limit || 10;
// return (page - 1) * limit + d.LAY_TABLE_INDEX + 1;
// }}
]]
});-
type: 'numbers'是最简方案,layui 2.8.0+ 支持,会自动处理跨页序号 - 低于 2.8 版本必须手算,且要确保
table.cache已就绪——不能在render前读,最好在done回调里初始化一次缓存 - 如果用了
where动态传参,序号不受影响;但若前端做了data模式(非 url 请求),则page和limit需自行维护
服务端返回序号字段?别这么做
有人想让后端在数据里加一个 index 字段返回,这会导致两个问题:
- 分页逻辑被前端绕过:后端按全量排序后截取,性能差,且无法响应前端的排序、搜索联动
- 序号无法随筛选实时更新:比如用户搜“张三”后,序号还是按全量排的,实际只显示 3 条,但序号可能是 7、15、22
- 除非你用纯前端分页(
data模式 +page: false),否则服务端给的序号基本没用
自定义序号列宽度和对齐方式
默认 type: 'numbers' 列宽偏窄、文字左对齐,容易和内容列挤在一起:
- 加
width: 60控制列宽(单位像素) - 加
align: 'center'居中对齐更协调 - 如果表格启用了
skin: 'line'或'nob',序号列边框会消失,但对齐和宽度仍生效 - 注意:不要给该列设
fixed: 'left',否则翻页时序号可能错位(layui 对 fixed 列的 index 计算有 bug)
真正麻烦的是带树形表格或展开行的场景——type: 'numbers' 会把子行也计数,而多数业务要求只对顶层行编号。这种时候必须弃用内置类型,改用 templet 手动判断 d.children 或层级字段。


















