Css 基于值更改Vue元素UI表格单元格样式

我用。 如何更改

速率

单元格值的颜色？若速率小于0，则颜色为红色，否则颜色为绿色

也许表格属性

单元格类名
可以帮助我

HTML



JS

导出默认值{
数据（）{
返回{
表格数据：[{
日期：“2016-05-03”，
名字：“汤姆”，
费率：1
}, {
日期：“2016-05-02”，
名字：“汤姆”，
费率：-1
}, {
日期：“2016-05-04”，
名字：“汤姆”，
收费：22
}, {
日期：“2016-05-01”，
名字：“汤姆”，
费率：-22
}]
}
}
}
将方法绑定到
的
单元格类名
属性：



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

方法：{
类检查器（{行，列}）{
如果（column.property=='rate'）{
const val=行[column.property]；
如果（val>0）{
返回“绿色等级”
}否则{
返回“redClass”
}
}
}
}

CSS

.greenClass{
背景：绿色；
}
红班先生{
背景：红色；
}
使用columnn模板

<el-table-column prop="rate" label="Rate">
      <template #default="scope">
          <label class="scope.row.rate < 0 ? 'danger' : 'success'">{{scope.row.rate}}</label>
      </template>
 </el-table-column>


{{scope.row.rate}


编辑：Link
您需要基于条件的css类。请参阅@Reynicke，他使用的是第三方库组件，因此该建议不可行，因为它需要访问内部标记