Change Vue Element UI table cell style based on value

Question

I use Element UI. How can I change the color from the rate cell value? If rate < 0 then color is red, else color is green.

Maybe the table attribute cell-class-name can help me?

HTML

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
            }]
        }
    }
}

user_2185093 · Answer

Bind a method to the cell-class-name prop of :

Define that classChecker method to test for the rate column and conditionally apply a class to the cell based on the value:

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;
}

user_1459163 · Answer

Use a columnn template

Link

Edit:Link

Change Vue Element UI table cell style based on value

2 Answers