在表格里面最常见的就是列状态展示,尤其是 2 个以上状态展示还要区分不同的颜色。这时候我们就不能用三目运算去判断,我们可以使用 JavaScript 闭包,进行传值操作。
例如:
<el-table-column
prop="totalGrade"
label="自评得分"
width="140px"
align="center">
<template slot-scope="scope">
<span :style="classObje(scope.row.totalGrade)">
<i :></i>
{{scope.row.totalGrade}}分
</span>
</template>
</el-table-column>
然后,在 computed 里面写入:
computed:{
classObje(totalGrade) {
return (totalGrade) => {
if (totalGrade < 0) {
return {'color' : 'red'}
} else if (totalGrade === 0) {
return {'color' : '#000'}
} else if (totalGrade > 0) {
return {'color' : '#13ce66'}
}
}
}
},
效果如下:
