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

关注

原创最新推荐文章于 2026-08-31 11:56:03 发布 2.5k 阅读 AI 写同款· GEO 优化 ›

前端开发模块VUE-Element UI学习笔记基于 Vue 的一套桌面端组件库，提前封装好的 UI 模板，方便开发者快速搭建一个网站前端界面。官网：https://element.eleme.cn/ 阅读详情

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

收录于