后端返回的數據的狀態值是數值0，1，2，3，4，5；需要將其轉化為相對應的文字和顏色，如圖所示：
HTML:
<el-table-column
prop="caseStatus"
label="狀態">
<template slot-scope="scope">
<span :class="scope.row.caseStatus | caseStatusColorFilter">{{ scope.row.caseStatus | caseStatusFilter}}</span>
</template>
</el-table-column>
JS:
const caseStatusMap = [
{
code: '0',
name: '收集中',
color: 'status-yellow'
},
{
code: '1',
name: '待標注',
color: 'status-default'
},
{
code: '2',
name: '待復審',
color: 'status-default'
},
{
code: '3',
name: '待審核',
color: 'status-default'
},
{
code: '4',
name: '被退回',
color: 'status-red'
},
{
code: '5',
name: '復查通過',
color: 'status-green'
}
]
// 過濾器
filters: {
// 將數值轉化為文字
caseStatusFilter (val) {
let value = null
caseStatusMap.forEach(arg => {
if (arg.code == val) {
value = arg.name
}
})
return value
},
// 顏色過濾
caseStatusColorFilter (val) {
let col = null
caseStatusMap.forEach(arg => {
if (arg.code == val) {
col = arg.color
}
})
return col
}
}
CSS:
.status-red{
color: red;
}
.status-yellow{
color: orange;
}
.status-green{
color: green;
}
.status-default{
color: #000;
}