如何让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'}
            }
        }
    }
},

效果如下:

如何让el-table表格el-table-column根据不同得值动态显示不同的颜色?

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 如何让el-table表格el-table-column根据不同得值动态显示不同的颜色?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们