实现效果图:
columns: [
...
{
title: "审核状态",
dataIndex: "auditStatus", //审核状态(1未提交 2待审核 3已审核待采购 4驳回 5采购已处理)
align: "left",
width: 200,
ellipsis: true,
customRender: ({ text }: any): any => {
let params = {
"1": "未提交",
"2": "待审核",
"3": "已审核待采购",
"4": "驳回",
"5": "采购已处理",
};
let classT = {
"1": "color: #fe9400;",
"2": "color: #bfbfbf;",
"3": "color: #02a7f0;",
"4": "color: #ff3b31;",
"5": "color: #000000;",
};
let value = params[String(text)];
// return value ? value : '/';
return h("div", { style: classT[String(text)] }, value);
},
},
...
],
//-----------------------------或者-------------------------------------------
// 采购执行状态(1待执行 2已执行 3部分执行 4待采购 5不采购)
{title: "采购执行状态",dataIndex: "purchaseStatus",align: "left",width: 130,ellipsis: true,
customRender: ({ text }: any): any => {
let params:any = {
'1': '待执行',
'2': '已执行',
'3': '部分执行',
'4': '待采购',
'5': '不采购',
};
let classT:any = {
'1': 'orange',
'2': 'gray',
'3': 'blue',
'4': 'red',
'5': 'black',
};
let value:any = params?.[String(text)];
let C:any = classT[String(text)]
return h('div',{class:C},value);
},
},
//css部分
:deep(.ant-table-cell){
.orange{
color:#fe9400;
}
.gray{
color:#bfbfbf;
}
.blue{
color:#02a7f0;
}
.red{
color:#ff3b31;
}
.black{
color:#000000;
}
}