表格行根据行数据变背景色

当需要根据行数据状态（如：异常、超期、命中风控）对整行做“背景色提示”时，推荐通过 ITableProps.rowClassName(record, index) 返回行 class 来实现，便于统一主题与样式复用。

适用场景

• 风险/异常行高亮（如 riskLevel === 'HIGH'）
• 超期行提示（如 overdueDays > 0）
• 对账差异/告警（如 diffAmount !== 0）

推荐做法：rowClassName

rowClassName 会在每一行渲染时被调用，返回一个 className 字符串。

<Table
  model="your_model"
  rowClassName="#{rowClassName}"
>
  <Fields>
    <Field name="code" />
    <Field name="name" />
    <Field name="riskLevel" />
    <Field name="overdueDays" />
  </Fields>
</Table>

行 class 对应的样式推荐在 controller 中动态插入（便于按页面隔离，避免全局样式污染）。建议为 style 标签设置唯一 id，做到注入去重，并在页面卸载时移除。

import { Controller } from '@terminus/nusi-sdk'

const STYLE_ID = 'tr-table-row-bg-style'

export default class extends Controller {
  rowClassName = (record) => {
    if (!record) return ''
    if (record.riskLevel === 'HIGH') return 'tr-table-row--danger'
    if (record.overdueDays > 0) return 'tr-table-row--warning'
    return ''
  }

  pageDidLoad() {
    if (document.getElementById(STYLE_ID)) return

    const style = `
      <style id="${STYLE_ID}">
        .tr-table-row--warning > td { background: #fff7e6; }
        .tr-table-row--danger > td { background: #fff1f0; }
      </style>
    `
    document.head.appendChild(document.createRange().createContextualFragment(style))
  }

  pageUnLoad() {
    document.getElementById(STYLE_ID)?.remove()
  }
}

可选做法：多状态叠加

当需要叠加多个状态（如“超期 + 风险”）时，可以拼接 className：

<Table
  model="your_model"
  rowClassName="#{rowClassNameV2}"
>
  <Fields>
    <Field name="code" />
    <Field name="name" />
  </Fields>
</Table>

对应 controller：

import { Controller } from '@terminus/nusi-sdk'

export default class extends Controller {
  rowClassNameV2 = (record) => {
    const classes = []
    if (record?.overdueDays > 0) classes.push('tr-table-row--warning')
    if (record?.riskLevel === 'HIGH') classes.push('tr-table-row--danger')
    return classes.join(' ')
  }
}

注意事项

• rowClassName 是运行时函数，内部逻辑尽量保持纯函数、轻量，避免复杂计算影响渲染性能。
• 只改整行背景色时，推荐选择器写到 > td，可避免单元格内部组件再设背景导致“块状不一致”。
• 如遇到“选中行/hover 样式被覆盖”，优先通过提高交互态的样式优先级解决（不要在行背景上使用过强的 !important）。