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 '已送达'

}

}

相关推荐
talenteddriver4 分钟前
web: http请求(自用总结)
前端·网络协议·http
全栈派森7 分钟前
Flutter 实战:基于 GetX + Obx 的企业级架构设计指南
前端·flutter
支撑前端荣耀19 分钟前
从零实现前端监控告警系统:SMTP + Node.js + 个人邮箱 完整免费方案
前端·javascript·面试
进击的野人20 分钟前
Vue.js 插槽机制深度解析:从基础使用到高级应用
前端·vue.js·前端框架
重铸码农荣光23 分钟前
🎯 从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化全解析!
前端·react.js·架构
用户40993225021223 分钟前
Vue3 v-if与v-show:销毁还是隐藏,如何抉择?
前端·vue.js·后端
Mr_chiu24 分钟前
🚀 效率暴增!Vue.js开发必知的15个神级提效工具
前端
JimmyWhat24 分钟前
Vue单页应用路由404问题:服务器配置与Hash模式解决方案
vue.js
shanLion24 分钟前
Vite项目中process报红问题的深层原因与解决方案
前端·javascript
烟袅26 分钟前
从零构建一个待办事项应用:一次关于组件化与状态管理的深度思考
前端·javascript·react.js