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;
}
以上是 vue-将表格里的状态值转化为文字并给其添加相对应的颜色（使用ElemnetUI）----使用过滤器 的全部内容， 来源链接： utcz.com/z/376263.html
