css - 根据值更改 Vue Element UI 表格单元格样式

Question

我使用 Element UI . 如何更改 rate 单元格值的颜色？如果速率 < 0，则颜色为红色，否则颜色为绿色。

也许表属性 cell-class-name 可以帮到我？

HTML

<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
        prop="date"
        label="Date"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="Name"
        width="180">
    </el-table-column>
    <el-table-column
        prop="rate"
        label="Rate">
    </el-table-column>
</el-table>

JS

export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-03',
                name: 'Tom',
                rate: 1
            }, {
                date: '2016-05-02',
                name: 'Tom',
                rate: -1
            }, {
                date: '2016-05-04',
                name: 'Tom',
                rate: 22
            }, {
                date: '2016-05-01',
                name: 'Tom',
                rate: -22
            }]
        }
    }
}

Answer 1

将方法绑定(bind)到 cell-class-name <el-table>的 Prop :

<el-table
  :data="tableData"
  style="width: 100%"
  :cell-class-name="classChecker"
>

定义 classChecker rate 的测试方法列并根据值有条件地将类应用于单元格:

methods: {
  classChecker({ row, column }) {
    if (column.property === 'rate') {
      const val = row[column.property];
      if (val > 0 ) {
        return 'greenClass'
      } else {
        return 'redClass'
      }
    }
  }
}

CSS

.greenClass {
  background: green;
}
.redClass {
  background: red;
}