Layui 表格 totalRow从入门到进阶完整指南【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui报表需要页面底部来一行汇总数字时Layui 表格组件的 totalRow 就是干这个的设成 true表格自动把数字列求和、底部多出一行合计不用你自己算。这篇给你totalRow 三层配置的心智模型、一个开箱即用的最小配置以及合计行不显示时的排查速查表。 一、先建立心智模型totalRow 配置该改哪一层totalRow 拆成三层表格级决定出不出现列级决定怎么显示后端级决定数字从哪来。配置层级管什么什么时候用表格参数totalRow全局开关合计行出不出开启功能时必设 true列参数totalRow该列的合计怎么显示true 自动求和字符串走模板每一列要参与合计时列参数totalRowText该列合计行的固定文本totalRow不是字符串时才生效想在某列显示合计这类前缀列参数totalRowDecimals求和结果保留几位小数默认 2 位希望合计显示整数时响应字段totalRowName后端在接口响应里返回合计数据的字段名默认totalRow需要跨页合计、由后端给数时记住一句话先开全局开关再逐列声明这列要合计最后才考虑显示细节。✅ 二、最小可用示例三行配置跑通合计行把表格级totalRow设成 true再在你想求和的列上加totalRow: true就够用了。const { table } layui; table.render({ elem: #test, data: [ // 本地数组即可跑通 { username: 杜甫, experience: 116 }, { username: 李白, experience: 12 }, { username: 王勃, experience: 108 }, ], totalRow: true, // 全局开关显示合计行 cols: [[ { field: username, title: 用户名 }, { field: experience, title: 积分, totalRow: true }, // 该列自动求和 ]], });渲染完成后表格底部多出一行用户名列是空的积分列显示 236116 12 108数字自动算好。 三、由浅入深列级 totalRow 的三种显示方式列级totalRow有 true、字符串模板两种取值再配上totalRowDecimals微调小数位能覆盖绝大多数显示需求。3.1 自动求和与固定文本求和列设totalRow: true纯展示列设totalRowText放固定文本。cols: [[ { field: id, title: ID, totalRowText: 合计 }, // 固定文本 { field: experience, title: 积分, totalRow: true }, // 自动求和 { field: logins, title: 登入次数, totalRow: true, totalRowDecimals: 0 }, // 合计取整 // ... 其他列 ]],ID 列的合计格显示合计三个字积分列显示该列所有数字之和保留两位小数登入次数列显示整数合计不带 .00注意totalRowText对已设模板字符串的列不生效模板会完全接管显示。3.2 模板字符串自定义显示totalRow传字符串时走 laytpl 模板渲染模板里能拿到d.TOTAL_NUMS本列求和值和d.TOTAL_ROW后端合计数据。cols: [[ // ... 其他列 { field: experience, title: 积分, totalRow: {{ d.TOTAL_NUMS }} 分, // 模板数字后面拼单位 }, ]],合计格从裸数字 236 变成236 分模板内也可以写 laytpl 支持的任意逻辑比如按条件输出不同文案注意模板里取值用d.TOTAL_NUMS它和自动求和共用同一个数字改显示格式不用改数据来源。3.3 控制合计的小数位数列上加totalRowDecimals: 0可以让合计显示整数默认值是 2所以金额类字段常配它。求和结果由 236.00 变成 236只对合计行生效不影响单元格里的原始数据注意它是截断显示用的toFixed不会改变求和逻辑本身。 四、排错手册totalRow 不生效时的速查表totalRow 的问题基本落在三类不显示、数字不对、被分页影响。按现象对号入座现象可能原因处理办法合计行整个不显示表格参数没设totalRow: true或所有列都没设列级totalRow表格级开全局开关至少一列设totalRow: true某列合计显示 0该字段是数字字符串以外的内容parseFloat解析失败按 0 计确认字段值是数字需要精确值时改由后端返回合计合计出现 .00 尾巴没设totalRowDecimals默认保留两位小数该列加totalRowDecimals: 0合计与全表数据对不上开启分页时合计只统计当前页的数据由后端汇总全量数据通过totalRow响应字段返回踩过这些坑基本就搞定了剩下的属于进阶场景。 五、进阶组合totalRow 与分页、后端的配合合计行本地求和只覆盖当前页数据要全表口径就让后端来给数。5.1 跨页合计后端提供 totalRow 数据接口在响应里多返回一个totalRow字段字段名可用response.totalRowName修改列的模板改引用d.TOTAL_ROW即可。table.render({ elem: #test, url: /api/user/list, totalRow: true, cols: [[ { field: experience, title: 积分, totalRow: {{ d.TOTAL_ROW.experience }} }, // ... 其他列 ]], });原理一句话后端返回该字段时TOTAL_NUMS和TOTAL_ROW都会优先取后端值跳过本地求和所以跨页数据也能对上。5.2 与单元格编辑配合列上同时开edit: text和totalRow: true时编辑保存触发表格数据重渲染合计行会跟着重新计算不需要额外写代码。改完某行积分底部合计立刻变编辑后记得走表格自带的更新方法提交数据合计才会重算 六、参考索引以上写法全部来自仓库内的测试页与源码可以逐一对照表格演示页含模板写法tests/visual/table.html合计行功能测试页totalRowText、模板、小数位tests/visual/table-test.html合计行实现源码renderTotalsrc/components/table.js演示用本地数据tests/visual/assets/json/table/demo1.json下一步把第二部分的最小示例拷进你的页面data换成你自己的数组看到底部合计行出现后再按 3.1 到 3.3 的顺序过一遍显示方式。【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考