vue-将表格里的状态值转化为文字并给其添加相对应的颜色（使用ElemnetUI）----使用过滤器
后端返回的数据的状态值是数值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;
}
