Layui怎样实现表格行被选中后的个性化CSS样式渲染

rowClickToCheck生效需先配置checkbox或radio列，否则被静默忽略；若已配置，应检查是否混用两种类型、CSS权重不足、皮肤样式覆盖或cellStyle干扰背景色。

rowClickToCheck 开启后，选中行没反应？先确认 checkbox 或 radio 列是否存在

这个参数只在表格配置了 type: 'checkbox' 或 type: 'radio' 列时才真正生效。没有这类列，rowclicktocheck: true 会被静默忽略。

• 必须在 cols 第一列（或任意位置）显式声明：{type: 'checkbox', fixed: 'left'}
• 不能同时存在 checkbox 和 radio 列，否则选择逻辑冲突，点击可能无响应
• 如果只是想视觉高亮、不需真实选中状态，别用这个参数——它本质是“让点击触发复选框勾选”，不是纯样式开关

用 table.on('row(filter)') 手动控制选中样式，更灵活也更可控

监听 row 事件后，拿到 obj.tr 就能直接操作 DOM。这是目前最稳定、兼容分页和重载的方案。

• obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click') 是核心逻辑，注意调用时机：它在每次点击后执行，天然覆盖翻页后的旧样式
• 不要在 done 回调里遍历 tbody tr 加 class——新页加载后老节点已销毁，且虚拟滚动下很多 tr 根本不在 DOM 中
• CSS 选择器要带 !important，因为 layui 默认给 tr 写了内联 background-color，普通 class 权重不够

自定义 class 生效但颜色不显示？重点检查三处

常见现象是 class 名确实加到了 <tr> 上，但背景/字体色没变。大概率卡在这几个地方：

• CSS 选择器没限定作用域：.layui-table-click 太弱，改成 table .layui-table tbody tr.layui-table-click 或直接加 !important
• 表格启用了 skin: 'line' 或 'nob'，这些皮肤会重置 tr 的 background 和 border，优先设为 skin: 'default'
• 某列设置了 cellStyle 返回了 background-color，它会覆盖整行的 rowStyle 或 class 背景——单元格样式优先级永远高于行级

需要多状态样式（如“选中+禁用”叠加）？别链式 addClass，先拼再加

避免反复调用 addClass 导致 class 重复或顺序混乱，尤其当状态组合较多时。

• 用数组收集条件：const classes = []，然后 if (row.status === 'disabled') classes.push('tr-disabled')
• 最后一次性加：rowElem.addClass(classes.join(' '))
• 记得判空：if (classes.length) rowElem.addClass(...)，防止空字符串污染 class 属性

实际渲染时，Layui 表格的 tr 元素本身不带奇偶 class，也不暴露 data-index 给 CSS 用，所以所有动态样式都得靠 JS 驱动。哪怕只是隔行变色，只要开了分页或虚拟滚动，CSS :nth-child 就不可靠——这点容易被忽略。