Q:需要根据code来显示不同的字体颜色
<el-table-column prop="instlSttusCode" label="分期状态" align="center">
<template slot-scope="scope">
<span :class="getClass(scope.row.instlSttusCode)">{{getCodeDesc(scope.row.instlSttusCode,filter.instlTypeCodeList)}}</span>
</template>
</el-table-column>
getClass(code) {
let colorArr = [];
switch (code) {
case "60401":
colorArr.push("pay-return");
break;
case "60402":
colorArr.push("pay-wait");
break;
case "60403":
colorArr.push("pay-initFail");
break;
case "60404":
colorArr.push("pay-initFail");
break;
case "60405":
colorArr.push("pay-success");
break;
case "60406":
colorArr.push("pay-fail");
break;
case "60407":
colorArr.push("pay-payMid");
break;
case "60408":
colorArr.push("pay-paySuccess");
break;
case "60409":
colorArr.push("pay-return");
break;
default:
colorArr.push("pay-default");
}
return colorArr;
},
//分期成功
.pay-success {
color: #33cb98;
}
//等候补件
.pay-wait {
color: #fecc00;
}
//初审未通过
.pay-initFail {
color: #fe6667;
}
//分期失效
.pay-fail {
color: #fe6667;
}
//还款中
.pay-payMid {
color: #33cb98;
}
//还款完成
.pay-paySuccess {
color: #33cb98;
}
//取消
.pay-return {
color: #606060;
}