element-ui 不同颜色状态与表格中后端返回数据渲染成中文

template

<el-table-column
   prop="status"
   label="状态"
   align="center"
 >
   <template #default="scope">
     <i :class="`tab_status${approveBgc(scope.row.status)}`"></i>
     <span style="margin-left: 10px;">{{ formatStatus(scope.row.status) }}</span>
   </template>
 </el-table-column>

script

let formatStatus = type => {
  const map = {
    draw: '草稿',
    running: '建库中',
    completed: '建库完成',
    failed: '建库失败'
  }
  return map[type];
};

// 表格状态
const approveBgc = statue => {// eslint-disable-line no-unused-vars
  const bgc = colorClass[statue] || '';
  if (bgc) {
    return ` ${bgc}`;
  };
  return '';
};
// 状态样式
const colorClass = reactive({
  'draw': 'bg-draw',
  'running': 'bg-running',
  'completed': 'bg-completed',
  'failed': 'bg-failed'
});

css

// 状态
.tab_status {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}

.bg-draw {
  background: grey
}

.bg-running {
  background: blue
}

.bg-completed {
  background: green
}

.bg-failed {
  background: red
}