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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期