I am utilizing Element UI for my project. How can I dynamically change the color of the rate cell value in the table? I want the color to be red when rate is less than 0, and green when it is greater than or equal to 0.
I wonder if the table attribute cell-class-name can assist me with this task?
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
}]
}
}
}