element-ui 表格的每个格子根据数值大小实现背景颜色不同

 
<el-table :data="quotaTableData" style="width: 100%;margin-bottom:20px;" border :cell-style='cellStyle'>
            <el-table-column label="指标" prop="quota" width="140"></el-table-column>
            <el-table-column label="备注" prop="explain" width="330"></el-table-column>
            <el-table-column label="EVENTID" prop="event"></el-table-column>
        </el-table>



 cellStyle (row, column, rowIndex, columnIndex) {
//                console.log('row', row)
                if (row.column.label === '指标') {
                    if (row.row.quota < 1) {
                        return 'background:yellow'
                    } else if (row.row.quota < 2) {
                        return 'background:orange'
                    } else if (row.row.quota < 1 && row.row.quota > 0.5) {
                        return 'background:green'
                    } else {
                        return 'background:pink'
                    }
                }
            },