Layui 的 totalRow 必须严格匹配:顶层字段名 totalRow,子属性名与列 field 完全一致(大小写、下划线等),且由后端全量聚合计算;前端需配置 totalRow: true,禁用自动求和,导出时手动追加合计行。
后端返回的 totalRow 字段必须符合 Layui 的结构约定
layui 从 2.5.6 版本起支持直接读取接口返回的 totalrow 对象,但前提是后端返回格式严格匹配。它不会自动识别任意字段名,只认顶层 totalrow 键,且其子属性名需与表格列的 field 完全一致。
常见错误是后端返回了 summary、aggregates 或嵌套在 data 里,Layui 会直接忽略——不报错,也不显示,合计行留空。
- ✅ 正确示例(JSON 响应体):
{"code":0,"msg":"","count":127,"data":[{...}],"totalRow":{"price":142850.50,"quantity":3260,"score":892.7}} - ❌ 错误示例:
{"summary":{"price":...}}、{"data":[...],"totalRow":[{"field":"price","value":...}]} - 如果用
parseData自定义解析,必须显式赋值:res.totalRow = res.ext.summary;
totalRow 字段在分页场景下必须由后端一次性计算全量
服务端分页时,前端每次只拿到当前页数据,totalRow 若只基于当前页算,就和开启 totalRow: true 没区别——仍是单页合计。真正“跨页合计”的唯一可靠方式,是后端在查总数时一并聚合所有符合条件的数据(不分页 limit),把汇总结果塞进 totalRow。
这意味着:数据库查询不能只 SELECT ... LIMIT 10 OFFSET 20,而要额外执行一条 SELECT SUM(price), SUM(quantity), AVG(score) FROM ... WHERE ...(或用窗口函数/子查询一次完成)。
- 性能注意:WHERE 条件必须完全一致,否则
totalRow和实际数据对不上 - 搜索/筛选参数(如 keyword、dateRange)必须透传到汇总查询中,不能漏
- 若业务允许,可缓存高频条件的汇总结果,避免每次请求都扫全表
前端配置必须与后端字段对齐,且禁用自动求和
只要后端返回了 totalRow,前端就不该再让 Layui 自己算。否则可能覆盖、冲突,或出现小数精度错乱(比如后端返回 "price": "142850.50",前端又 parseFloat 后加一遍)。
- 列定义中仍需写
totalRow: true,这是触发 Layui 读取并渲染totalRow字段的开关 - 不要在列上设
totalRowTemplet或在done回调里手动填合计单元格,否则会覆盖后端值 - 确保
cols中每个带totalRow: true的列,其field名在后端totalRow对象中存在且类型为字符串或数字(Layui 会自动 toString) - 如果后端返回的是字符串(如
"142850.50"),比数字更安全,避免 JS 浮点误差影响展示
导出时合计行丢失?得手动补进导出数据
Layui 的 table.exportFile() 默认只导出 data 数组,完全不处理 totalRow。所以即使页面上显示了合计,导出的 CSV/Excel 里还是没这一行。
解决方法是重写导出逻辑,在点击导出时把 totalRow 作为一条特殊数据追加进去:
table.on('toolbar(test)', function(obj){
if(obj.event === 'export'){
const config = obj.config;
const totalRowData = config.totalRow || {};
// 构造合计行对象,字段名对齐 cols
const exportRow = {};
config.cols[0].forEach(col => {
if(col.totalRow && totalRowData[col.field] !== undefined){
exportRow[col.field] = totalRowData[col.field];
}
});
// 追加到导出数据末尾
const exportData = obj.data.concat([exportRow]);
table.exportFile(config.id, exportData, 'csv');
}
});
注意:obj.data 是当前页数据,不是全量;config.totalRow 是接口返回的原始 totalRow 对象,无需再查缓存或重算——这才是后端方案最省心的地方。
最易被忽略的一点:后端返回的 totalRow 字段名大小写、下划线风格,必须和前端 field 完全一致;哪怕只是多一个空格或驼峰/下划线混用,Layui 就找不到对应列,合计行那格就永远空白。
















