2.若依vue表格数据根据不同状态显示不同颜色style

例如国标显示蓝色,超标是红色
使用是蓝色,未使用是绿色

<el-table-column label="外卖配送是否完成评价" align="center" prop="isOverFlag">

<template slot-scope="scope">

<div :style="{'color':scope.row.isOverFlag==='0'?'#ff4949':'#1ab394'}">

{{switchFormat(scope.row.isOverFlag)}}

</div>

</template>

</el-table-column>

记得在后面的methods: {中加上

switchFormat(v) {

if (v === 0 || v === '0') {

return '未完成'

} else if (v === 1 || v === '1') {

return '已送达'

}

}

相关推荐
夜空孤狼啸2 分钟前
npm、yarn、pnpm清理缓存
前端·缓存·npm
HIT_Weston4 分钟前
56、【Ubuntu】【Gitlab】拉出内网 Web 服务:http.server 单/多线程分析(八)
前端·ubuntu·gitlab
大模型真好玩4 分钟前
轻松搞定年度报告可视化,五分钟用 AntV + Trae Solo 快速构建智能图表生成器!
前端·人工智能·trae
艾小码9 分钟前
Vue Router 进阶指南:打造丝滑的滚动控制与惊艳的路由动画
前端·javascript·vue.js
老华带你飞1 小时前
校园快递|基于Java校园快递管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
苏打水com8 小时前
第九篇:Day25-27 Vue进阶——组件复用与状态管理(对标职场“复杂项目”需求)
前端·javascript·vue.js
老华带你飞8 小时前
博物馆展览门户|基于Java博物馆展览门户系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·后端
PineappleCoder8 小时前
别让页面 “鬼畜跳”!Google 钦点的 3 个性能指标,治好了我 80% 的用户投诉
前端·性能优化
卤代烃9 小时前
🕹️ [AI] Chrome DevTools MCP 原理分析
前端·mcp
梦里不知身是客119 小时前
flink对于迟到数据的处理
前端·javascript·flink