VueJs+Vuetify v-simple-table 如何按单元格值动态设置背景色

整列单元格全绿的核心原因非常明确：你写的class绑定判断逻辑:class="OK? 'primary' : 'accent'"里，判断用的是一个独立的全局变量OK，根本没有和当前单元格的实际取值item.pcb1做关联。只要这个OK变量在项目中存在且值为真，整列所有单元格都会匹配同一个样式，完全不关心每个格子自己的内容是什么，自然会出现全列样式一致的异常。

1. 最简内联判断写法 #

逻辑不复杂的场景下，直接把判断条件替换为当前单元格的实际取值，匹配Vuetify自带的语义化样式类即可：

<td 
  :class="item.pcb1 === 'OK' ? 'bg-success text-white' : item.pcb1 === 'KO' ? 'bg-error text-white' : ''"
>
  {{ item.pcb1 }}
</td>

这里用到的bg-success（绿色背景）、bg-error（红色背景）是Vuetify内置的主题样式类，不需要额外写自定义CSS就能直接生效，也会自动跟随项目的主题色配置变化。如果只需要文字变色不需要背景，把类换成text-success、text-error就行。

2. 可维护性更好的抽离写法 #

如果表格列多、判断逻辑后续可能扩展，不要在模板里写多层嵌套三元，把判断逻辑抽成独立方法会更清爽：

// 组件内methods块
methods: {
  getCellStyle(cellValue) {
    switch(cellValue) {
      case 'OK':
        return 'bg-success text-white'
      case 'KO':
        return 'bg-error text-white'
      // 后续新增其他取值的样式规则直接加case即可
      default:
        return ''
    }
  }
}

模板里直接传入当前单元格的值调用即可：

<td :class="getCellStyle(item.pcb1)">{{ item.pcb1 }}</td>

3. 确认基础表格结构无偏差 #

要确保v-for遍历是直接作用在数据行上的，class判断时拿到的是当前行的对应字段值，不要把判断逻辑写在循环外的公共位置，参考正确的结构：

<v-simple-table>
  <thead>
    <tr>
      <th>PCB1检测结果</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in jsonTableData" :key="item.uniqueId">
      <td :class="getCellStyle(item.pcb1)">{{ item.pcb1 }}</td>
    </tr>
  </tbody>
</v-simple-table>

• 判断取值时一定要做严格相等匹配（用===），避免因为隐式类型转换出现样式错配
• 不要用primary、accent这类泛化的主题类做状态判断，这类类是Vuetify的品牌主色，本身没有明确的“通过/失败”语义，后续调整主题色时容易出现样式不符合预期的问题
• 如果单元格存在空值、异常值的情况，要在判断逻辑里做兜底，避免空值也匹配到默认的红色/绿色样式

内容的提问来源于stack exchange，提问作者Antoine Kurka