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>