element-ui:class动态产值的问题记录

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