vue+element 表格formatter数据格式化并且插入html标签 ;
formatter的用法:
列表内容回显, orderStatus 0 是未处理, 1是已处理等,不能直接展示,所以需要 formatter
<el-table-column label="订单状态" prop="orderStatus" :formatter="statusFormatter"> </el-table-column>
methods:
/ 审核状态
statusFormatter(row){
if(row.orderStatus == 0){
return <span style="color:red">未处理</span>
}else if(row.orderStatus == 1){
return <span style="color:#2fc171">已处理</span>
}
},
或者:
<el-table-column label="状态" min-width="120">
<template v-slot="{ row }">
<span v-if="row.orderStatus == 0" style="color: #db8709"
>未提交</span
>
<span v-else-if="row.orderStatus == 1" style="color: #098ddb"
>已提交</span
>
<span v-else-if="row.orderStatus == 2" style="color: green"
>审核通过</span
>
<span v-else-if="row.orderStatus == 3" style="color: #f00"
>审核未通过</span
>
</template>