【Vue】Element UI el-tag 根据不同状态的数据展示不同颜色的标签

InterviewCoder

# 【Vue】Element UI el-tag 根据不同状态的数据展示不同颜色的标签

# Element UI 根据不同状态的数据展示不同颜色的标签

展示标签可以使用 el-tag,不同的数据可以使用三目运算进行管控
代码如下:

1
2
3
4
<el-tag :type="(scope.row.auditstatus == '0' ? '' : (scope.row.auditstatus == '1' ? 'success' : (scope.row.auditstatus == '2' ? 'danger' : (scope.row.auditstatus == '3' ? 'warning' : 'danger'))))" size="mini">
{{ scope.row.auditstatus == '0' ? '初始值' : (scope.row.auditstatus == '1' ? '审核通过' : (scope.row.auditstatus == '2' ? '审核不通过' : (scope.row.auditstatus == '3' ? '待审核' : '删除'))) }}
</el-tag>
123

效果图如下:
在这里插入图片描述
在这里插入图片描述

# 关于我

Brath 是一个热爱技术的 Java 程序猿,公众号「InterviewCoder」定期分享有趣有料的精品原创文章!

InterviewCoder

非常感谢各位人才能看到这里,原创不易,文章如果有帮助可以关注、点赞、分享或评论,这都是对我的莫大支持!

评论