在el-table 加属性:cell-style=“cellStyle”
根据用户的状态(数字)转成英文

<el-table :data="orderfinishinfo" style="width: 100%; font-size: 0.8rem" :cell-style="cellStyle">

<el-table-column label="Status" align="center" prop="status">
                  <template #default="scope">
                    {{
                      scope.row.status == "1"
                        ? "Notstarted"
                        : scope.row.status == "2"
                        ? "Ongoing"
                        : scope.row.status == "3"
                        ? "Finish"
                        : scope.row.status == "4"
                        ? "Rejected"
                        : scope.row.status == "5"
                        ? "Checking"
                        : 'Unassigned'
                    }}
                  </template>
                </el-table-column>




</el-table>

在methods中写入方法,row.row.lossStatus与prop对应,row.column.label与lable对应,返回对应颜色即可

  • row.column.label 指定是修改的哪一列
  • row.row.status 根据状态(数字) 返回对应的颜色
method:{
cellStyle(row) {
      if (row.row.status == 1 && row.column.label == "Status") {
        return { color: "#6495ED" };
      } else if (row.row.status == 2 && row.column.label == "Status") {
        return { color: "#D8BFD8" };
      } else if (row.row.status == 3 && row.column.label == "Status") {
        return { color: "#008000" };
      } else if (row.row.status == 4 && row.column.label == "Status") {
        return { color: "#FF0000" };
      } else if (row.row.status == 5 && row.column.label == "Status") {
        return { color: "	#FFFF00" };
      } else if (row.row.status == 6 && row.column.label == "Status") {
        return { color: "#DCDCDC" };
      }
    },

效果
在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐