layui table 的 totalRow 样式不能直接用 skin 或 even 控制,因其是渲染后单独插入的 DOM,不参与奇偶行和主题色逻辑;需用 CSS 精准定位 .layui-table tbody .layui-table-total 并加 !important 覆盖,固定列区域还需额外处理 .layui-table-patch。

layui table 的 totalRow 样式为什么不能直接用 skin 或 even 控制
因为 totalRow 是 layui 表格在渲染完所有数据后,**单独插入的一行 DOM**,它不参与常规的奇偶行(even)、主题色(skin)逻辑,也不响应 rowStyle 回调。你给表格设了 even: true 或 skin: "line",对合计行完全无效。
最稳妥的方式:用 CSS 选择器精准定位合计行并覆盖样式
layui 会给合计行自动添加 layui-table-total class,且该行始终是 <tr>,位于 <tbody> 最末。所以直接写 CSS 即可:
.layui-table tbody .layui-table-total {
background-color: #f8f9fa !important;
font-weight: bold;
}
注意几点:
-
!important很关键——layui 内部有默认背景(比如白色或继承自even),不加可能被覆盖 - 不要只写
.layui-table-total,加上tbody前缀避免误命中其他同名元素 - 如果用了固定列(
fixed: "right"),右侧固定区的合计行 class 是layui-table-patch,需额外处理:
.layui-table .layui-table-patch .layui-table-total {
background-color: #f8f9fa !important;
}
动态修改合计行背景(比如根据数值变色)要改 DOM 属性
如果你需要在 done 回调里根据合计值动态设背景,得手动操作 DOM:
done: function(res, curr, count) {
const totalTr = this.elem.next('.layui-table-box').find('tbody .layui-table-total');
if (totalTr.length) {
const totalAmount = parseFloat($(totalTr).find('td:eq(2)').text()) || 0;
totalTr.css('background-color', totalAmount > 10000 ? '#ffebee' : '#f0f9eb');
}
}
关键点:
- 合计行不在原始
this.elem(即<table>)内,而在后续生成的.layui-table-box容器里 - 用
td:eq(n)取对应列时,n 是从 0 开始的索引,注意列顺序是否含 checkbox、toolbar 等隐藏列 - 别忘了加
!important的 CSS 规则仍要存在,否则.css()设置可能被样式表覆盖
用 totalRow 配置项 + 自定义 HTML 时,背景控制更灵活但要防 XSS
如果你启用了 totalRow: true 并配合 cols 中的 totalRowText 或返回 HTML 字符串:
{field: 'price', title: '金额', totalRowText: '<div style="background:#e3f2fd;padding:8px">合计</div>'}
这样能绕过 CSS 覆盖限制,但要注意:
- 必须写完整 inline style,class 不生效(layui 会剥离 class 属性)
- HTML 字符串里不能含用户输入内容,否则有 XSS 风险
- 这种写法只影响单元格内容区域,整行背景仍需靠上面的 CSS 控制
.layui-table-patch 区域的样式同步,以及 !important 在 CSS 层级中的必要性。


















