<el-table-column
  prop="status"
  label="状态"
  align="left"
  :formatter="formatTd"
>
  <template slot-scope="scope">
    <span class="grayStatus" v-if="scope.row.status === 1"
      >未开始</span
    >
    <span class="greenStatus" v-else-if="scope.row.status === 2"
      >考试中</span
    >
    <span class="overStatus" v-else-if="scope.row.status === 3"
      >已结束</span
    >
    <span v-else>--</span>
  </template>
</el-table-column>

全局样式

/* 列表状态颜色 */
.redStatus::before,
.greenStatus::before,
.blueStatus::before,
.grayStatus::before,
.overStatus::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.redStatus::before {
  background: #ff4d4d;
}

.greenStatus::before {
  background: #02CCA3;
}

.blueStatus::before  {
  background: #4ea7ff;
}

.grayStatus::before  {
  background: #999999;
}

.overStatus::before {
  background: #F9A727;
}