element-ui:class动态产值的问题记录_elementui动态class-优快云博客

本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/82430862

本文介绍了一种在前端开发中使用Elment UI的表格组件显示不同状态并根据状态码更改字体颜色的方法。通过定义状态码对应的类名实现颜色区分，如分期成功显示为绿色(#33cb98)，等候补件显示为黄色(#fecc00)，初审未通过及分期失效显示为红色(#fe6667)等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}