Layui的totalRow不支持直接显示自定义文字,需在done回调中用DOM操作覆盖对应td内容;例如用tds[1].innerHTML='金额合计(元)'实现。
layui table 合计行怎么加自定义文字(不是数字)
直接说结论:layui 的 totalrow 不支持在合计单元格里直接写纯文字,它默认只认数字、自动求和;但你可以绕过这个限制,用 dom 操作手动覆盖内容。
核心思路是:先让 Layui 渲染出合计行(哪怕填 0 或空值),再在 done 回调里定位到对应 <td>,用 <code>innerHTML 或 textContent 替换掉原有内容。
为什么不能直接在 totalRow 里写字符串
Layui 内部对 totalRow 的每个字段做了类型判断——遇到非数字(比如 "小计" 或 "合计:")会跳过渲染,或者留空,甚至可能报错 NaN。这不是 bug,是设计使然:它只把 totalRow 当作数值聚合容器。
-
totalRow: { price: "合计:" }→ 不生效,<td> 为空 <li> <code>totalRow: { price: "小计" }→ 渲染后显示0或空白 - 想显示“金额合计(元)”,必须后期 DOM 注入
实操:在 done 回调里改合计行文字
关键动作是等表格完全渲染完,再操作 DOM。注意:要等 totalRow 真实存在,所以必须在 done 里做,不能放 render 前。
示例场景:给第二列(索引为 1)的合计单元格改成“金额合计(元)”:
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'name', title: '姓名'},
{field: 'price', title: '金额'}
]],
totalRow: true,
done: function(res, curr, count) {
// 等待下一次 DOM 更新完成(确保 totalRow 已插入)
setTimeout(() => {
const totalTr = document.querySelector('.layui-table-total tr');
if (totalTr) {
const tds = totalTr.querySelectorAll('td');
if (tds[1]) {
tds[1].innerHTML = '<strong>金额合计(元)</strong>';
}
}
}, 10);
}
});
- 用
setTimeout是因为 Layui 插入totalRow是异步的,不延时可能查不到节点 - 优先用
querySelector而不是 jQuery,避免额外依赖 - 如果列有固定宽度或设置了
align,文字会被居中/对齐,无需额外样式 - 修改
innerHTML可以加<strong></strong>等标签;若只要纯文本,用textContent
多列混合处理:数字 + 文字共存的合计行
常见需求:第一列写“合计”,后面几列显示真实数字。这时候不能全靠 totalRow 配置,得组合使用。
- 在
totalRow中,只填需要计算的列(如{ price: 0, num: 0 }),其他列留空或填0 - 在
done回调里,统一替换第 0 列为文字,其余列保留 Layui 计算结果(或按需重写) - 如果某列本该显示文字但被自动转成
0,说明 Layui 已经覆盖了它——你得用 DOM 强制覆盖回来 - 注意分页切换时
done会再次触发,所以你的 DOM 修改逻辑要能重复执行,不要追加两次“合计”
最易忽略的一点:Layui 的合计行没有唯一 class 或 data 属性,靠 .layui-table-total tr 定位是目前最稳的方式;但如果页面有多个 Layui 表格,记得加父容器限定范围,比如 #demo .layui-table-total tr。











