<el-button>{{status}}</el-button>
methods(){
async getList() {
const res = await this.$api.queryVoucherLog(参数);
const {data} = res;
this.tableData = data?.map((item) => {
item.status = this.getStatus(item.status);
return item;
});
},
getStatus(status) {
if (status === 1) {
return "有效";
} else if (status === 2) {
return "无效";
} else if (status === 3) {
return "待评估";
} else if (status === 4) {
return "评估中";
} else {
console.log(status + "状态 不存在");
}
},
}
————————————————————————————————
状态:
"待分配", "待填写", "待审核", "审核通过", "审核不通过",
"待填写简报", "不需要走访", "简报退回修改",
<div :class="['status',
{ 'status0': (item.status)==0},{'status1': (item.status)==1},
{'status2': (item.status)==2},{'status3': (item.status)==3},
{'status4': (item.status)==4},{'status5': (item.status)==5},
{'status6': (item.status)==6},{'status7': (item.status)==7}]">
{{item.completeType}}
</div>
.status {
padding: 10rpx 15rpx;
text-align: center;
font-weight: normal;
border-radius: 6rpx;
font-size: 24rpx;
margin-left: 20rpx;
}
.status0 {
/* 待分配 */
border: 1px solid #f2f6fc;
color: #f2f6fc;
background-color: #fafafc;
}
.status1 {
/* 待填写 */
border: 1px solid #409eff;
color: #409eff;
background-color: #e0edfa;
}
.status2 {
/* 待审核 */
border: 1px solid #E6A23C;
color: #E6A23C;
background-color: #fdf6ec;
}
.status3 {
/* 审核通过 */
border: 1px solid #67c23a;
color: #67c23a;
background-color: #e6fcea;
}
.status4 {
/* 审核不通过 */
display: flex;
border: 1px solid #f56c6c;
color: #f56c6c;
background-color: #fde2e2;
}
.status5 {
/* 待填写简报 */
display: flex;
border: 1px solid #9d3e0d;
color: #9d3e0d;
background-color: #ddc08f;
}
.status6 {
/* 不需要走访 */
display: flex;
border: 1px solid#909399;
color: #909399;
background-color: #e9e9eb;
}
.status7 {
/* 简报退回修改 */
display: flex;
border: 1px solid #ff0000;
color: #ff0000;
background-color: #ffd3cd;
}