方法一:
缺点:会减少性能 switch得一直判断
<template slot-scope="scope">
<span
class="td-status"
:class="getcontractCheckClass(scope.row)"
>
{{ contractCheckText[scope.row.contractCheck] }}
</span>
</template>
methods里面写个方法
getcontractCheckClass(row) {
let c = "";
switch (row.contractCheck) {
case 0:
c = "draft";
break;
case 1:
c = "nosure";
break;
case 2:
c = "nocheck";
break;
case 3:
c = "success";
break;
case 4:
c = "fail";
break;
}
return c;
},
.td-status {
display: inline-block;
// width: 72px;
height: 26px;
border-radius: 2px;
text-align: center;
line-height: 26px;
font-size: 14px;
&.draft {
background: #f0f2f5;
border-radius: 2px;
color: #909399;
}
&.nocheck {
background: #fff2dd;
color: #ffad28;
}
&.success {
background: rgba(13, 168, 139, 0.1);
border-radius: 2px;
color: #0da88b;
}
&.wait {
background: #fff2dd;
color: #ffad28;
}
&.fail {
background: #fceded;
color: #ef5656;
}
}
方法二:
优点:状态和颜色的映射关系都在字典里面被管理起来了
<el-table-column
min-width="90"
label="审核状态"
align="left"
show-overflow-tooltip
>
<template v-slot="scope">
<span
:class="
getContractCheckInfo(scope.row.contractCheck, 'class')
"
>{{ getContractCheckInfo(scope.row.contractCheck) }}</span
>
</template>
</el-table-column>
const CONTRACTCHECKMAP = [
{
value: 0,
text: "草稿",
class: "span_info"
},
{
value: 1,
text: "待审核",
class: "span_warning"
},
{
value: 2,
text: "审核通过",
class: "span_success"
},
{
value: 3,
text: "审核不通过",
class: "span_error"
}
];
getContractCheckInfo(value, type = "text") {
if (typeof value == "undefined") return "";
return CONTRACTCHECKMAP.find(item => item.value == value)[type];
},
.span_success,
.span_danger,
.span_warning,
.span_info {
display: inline-block;
padding: 6px 13px;
border-radius: 2px;
line-height: 1;
text-align: center;
font-size: @font14;
}
.span_success {
background: #0da88b19;
color: #0da88b;
}
.span_danger {
background: #ef565619;
font-size: @font14;
color: #ef5656;
}
.span_warning {
background: #f6a42019;
font-size: @font14;
color: #f6a420;
}
.span_info {
background: #e4e4e4;
font-size: @font14;
color: #909399;
}