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

}

}

相关推荐
SuperEugene2 分钟前
NPM Script 实战:常用命令设计与封装|Vue 工程化篇
前端·javascript·vue.js·前端框架·npm
前端进阶之旅6 分钟前
React 18 并发特性实战指南:提升大型应用性能的关键技术
前端·react.js·前端框架
恋猫de小郭7 分钟前
Android 性能迎来提升:内核引入 AutoFDO 普惠所有 15-16 设备
android·前端·flutter
小霍同学10 分钟前
Vue 动态表单(Dynamic Form)
前端·vue.js
Dragon Wu16 分钟前
Taro 小程序开发注意事项(不定期记录更新)
前端·javascript·小程序·typescript·taro
wangfpp18 分钟前
多端统一你真的会了吗?
前端·javascript·架构
小霍同学18 分钟前
Vue 动态组件(Dynamic Components)
前端·vue.js
Chengbei1123 分钟前
AI 自动逆向 JS 加密!自动抓密钥、出报告,彻底解放双手,解决抓包数据包加密难题
开发语言·javascript·人工智能·安全·网络安全·网络攻击模型
代码煮茶25 分钟前
Vue3 组件封装实战 | 从 0 封装一个可复用的表格组件(附插槽 / Props 设计)
前端·vue.js
兜兜风27 分钟前
从零部署 OpenClaw:打造你的第二大脑
前端·后端