如何让el-table表格el-table-column根据不同得值动态显示不同的颜色?
在表格里面最常见的就是列状态展示,尤其是2个以上状态展示还要区分不同的颜色。这时候我们就不能用三目运算去判断,我们可以使用JavaScript闭包,进行传值操作。
例如:
<el-table-column prop="totalGrade" label="自评得分" width="140px" align="center"> <template slot-scope="scope"> <span :style="classObje(scope.row.totalGrade)"> <i :class="scope.row.totalGrade<0?'el-icon-bottom':'el-icon-top'"></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'} } } } },
效果如下:
声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 如何让el-table表格el-table-column根据不同得值动态显示不同的颜色?
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 如何让el-table表格el-table-column根据不同得值动态显示不同的颜色?