element-table表格中插入颜色块显示数据状态的示例代码

 <el-table-column  label="是否异常">
        <template slot-scope="scope">
          <div class="dcs_sf_red" v-if="scope.row.sfyc == 0"></div>
          <div class="dcs_sf_green" v-if="scope.row.sfyc == 1"></div>
        </template>
      </el-table-column>

data [
        {
          date: '00:00',
          mode: '固定模式',
          jhz: 120,
          sfyc: 0,
          sjz: 120,
          sfxy: 1,
          fkz: 110,
          cgfs: 1,
        }]

.dcs_sf_red{
  margin-left: 30%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FE685D;
}
.dcs_sf_green{
  margin-left: 30%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #5DFE96;
}

<el-table :row-class-name="tableRowClassName">xxx</el-table>
const tableRowClassName = (value) => {
  if (JSON.stringify(row.stopApplyType) != 'null') {
    console.log('停发')
    return 'error-row'
  } else {
    return ''
  }
}
<style>
.el-table .error-row {
  --el-table-tr-bg-color: var(--el-color-error-light-9);
}
</style>

//红色的
.el-table .error-row {
  --el-table-tr-bg-color: var(--el-color-error-light-9);
}
.el-table .error-row .el-table-fixed-column--left {
  background-color: #fef0f0;
}
.el-table .error-row .el-table-fixed-column--right {
  background-color: #fef0f0;
}