表格某一列根据值不同,显示不同颜色vue
status的值来自字典。
·
1.样式图
图一:

图二:
2.相关代码
status的值来自字典
<el-table-column
label="状态"
align="left"
prop="status"
width="110"
>
<template slot-scope="scope">
//图一样式
<el-button :type="getType(scope.row)" size="mini">
{{statusFormat(scope.row)}}
</el-button>
//图二样式
//<span :class="{'warningColor':scope.row.status==0,
// 'mainColor':scope.row.status==1,
// 'infoColor':scope.row.status==2,'dangerColor':scope.row.status==3,
// 'sucessColor':scope.row.status==4}"
//>
// {{statusFormat(scope.row)}}
//</span>
</template>
</el-table-column>
methods: {
//图一
getType(row){
if(row.status==0){
return 'warning'
}else if(row.status==1){
return 'primary'
}else if(row.status==2){
return 'info'
}else if(row.status==3){
return 'danger'
}else if(row.status==4){
return 'success'
}
}
}
<style scoped>
/* 图二 */
.mainColor {
color: #409EFF;
}
.sucessColor {
color: #6EC543;
}
.warningColor{
color: #fda22b;
}
.infoColor{
color: #cecfc3;
}
.dangerColor{
color: #EB4040;
}
</style>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)