给文本根据判断加不同的class

我这里的例子是表单中根据接口返回的不同字段显示不同颜色

首先是模板，用插槽插到表单里

:class="setFontColor(warningLevel.level) 注意这里，setFontColor这是一个方法

<template slot="warningLevel" slot-scope="warningLevel">
          <span :class="setFontColor(warningLevel.level)">{{
            warningLevel.level
          }}</span>
</template>

然后表单渲染

{
    title: "标题",
    key: "level",
    // dataIndex: "level",
    scopedSlots: { customRender: "warningLevel" },
    align: "center",
    width: "6%",
    ellipsis: true,
  },

在js中，需要return

setFontColor(color) {
      let fontColor = "";
      switch (color) {
        case "红色":
          fontColor = "font-red";
          break;
        case "橙色":
          fontColor = "font-orange";
          break;
        case "黄色":
          fontColor = "font-yellow";
          break;
        case "蓝色":
          fontColor = "font-blue";
          break;
      }
      return fontColor;
    },

最后在css样式的地方，把.font-red这些都添加上去

.font-red {
  color: #e05149;
}
.font-orange {
  color: #ff7901;
}

注意：最后return的得是样式的名字，就是.xxxx