给Table表格单元格数据添加样式

需求：

工作中需要做一个检查温度的表格列表页面，发热时status为1-异常，人员的状态和温度一栏呈现红色。

于是我先去查看了 el-table 的组件参数说明 Table表格

选择使用cell-style改变单元格样式。:cell-style="changeCellStyle"直接绑定在el-table标签上,然后在方法中定义row或column的样式。

这种做法比较冗余，后来发现可以直接添加slot-scope实现，代码如下：

<el-table-column prop="statusName" label="状态" align="center">
  <template slot-scope="{ row }">
    <span :class="statusClass(row.status)">{{ row.statusName }}</span>
  </template>
</el-table-column>
<el-table-column prop="temperature" label="温度" align="center">
  <template slot-scope="{ row }">
    <span :class="statusClass(row.status)">{{ row.temperature }}°C</span>
  </template>
</el-table-column>

methods: {
  statusClass(status) {
    switch (status) {
      case 0:
        return 'normal'
      case 1:
        return 'error'
      case 2:
        return ''
    }
  },
}

<style lang="less" scoped>
.normal {
  color: rgb(28, 179, 28);
}
.error {
  color: rgba(234, 36, 36, 1);
}
</style>