cellStyle 应返回内联样式对象控制单列字体粗细和字体族,如 'font-weight': '600'、'font-family': '"Microsoft YaHei", sans-serif';多列需逐列配置,不支持CSS类名或全局覆盖,且不可用于导出Excel。
layui table 的 cellStyle 配置怎么改文字粗细和字体
直接用 cellstyle 返回内联样式对象,不支持 css 类名或全局覆盖。layui 表格单元格样式必须在列定义里逐列控制,不能像普通 html 表格那样用 css 选择器统一改。
常见错误是试图在 table.render() 外写 .layui-table td { font-weight: bold; } —— 这会污染所有表格,且被 Layui 内部的 !important 覆盖,基本无效。
-
cellStyle函数接收row、col、data、index四个参数,返回一个带css属性的对象 - 只对当前列生效,如果多列要加粗,每列都得单独配
cellStyle - 字体族(font-family)建议只设通用安全字体,如
"Helvetica Neue", Arial, sans-serif,避免中文字体路径问题
cols: [[
{ field: 'name', title: '姓名', cellStyle: function() {
return { css: { 'font-weight': '600', 'font-family': '"Microsoft YaHei", sans-serif' } };
}
}
]]
为什么用 cellStyle 而不是 templet 自定义模板
用 templet 写 HTML 模板确实更自由,但代价是:失去 Layui 默认的单元格对齐、溢出省略、响应式折叠等行为;同时,templet 返回的内容会被当作文本插入,若没手动加 style="...",字体样式不会继承列配置。
除非你要做复杂内容(比如带图标+文字+状态徽章),否则纯改字体粗细/大小/颜色,cellStyle 更轻量、更稳定、性能更好。
-
cellStyle在渲染前计算样式,不触发 DOM 重排 -
templet每次重绘都会执行函数,含大量字符串拼接时可能卡顿 - 移动端下
templet容易因换行或盒模型错乱导致文字截断异常
设置不同行的文字样式(比如重点数据高亮)
cellStyle 函数里能拿到 row 和 index,所以可以按业务逻辑动态控制——比如金额大于 10000 的行加粗,或者状态为 “已审核” 的单元格变黑体。
注意别在 cellStyle 里调接口或做耗时计算,它会在每次表格重绘时同步执行,影响滚动流畅度。
- 判断条件尽量用简单比较:
row.amount > 10000,避免JSON.stringify(row).includes(...) - 不要在
cellStyle中修改row原对象,会导致数据污染 - 如果需要统一控制某几列的样式逻辑,可抽成独立函数复用,但别闭包大对象
cellStyle: function({row}) {
if (row.status === 'approved') {
return { css: { 'font-weight': 'bold', 'color': '#2F4056' } };
}
}
兼容性与容易忽略的细节
Layui 2.8+ 对 cellStyle 支持较稳,但低版本(如 2.5.6)存在样式丢失问题——特别是配合 fixed: 'left' 左固定列时,固定列的 cellStyle 可能不生效。这是内部渲染顺序 bug,没绕过办法,只能升版本。
另一个坑是字体大小:Layui 默认单元格 font-size: 14px,如果你设 12px,小屏下可能看不清;设 16px 又可能撑破列宽。建议优先用 em 或保持默认,靠 font-weight 区分信息层级。
- Chrome 120+ 下,
font-variant: small-caps等属性在cellStyle中无效,仅支持基础属性 - IE11 已不被 Layui 官方支持,别为它加 hack
- 导出 Excel 时,
cellStyle设置的样式完全不生效,那是后端或插件控制的










