element-ui:class動態產值的問題記錄
阿新 • • 發佈:2019-02-13
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;
}