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

}

}

相关推荐
小龙报17 小时前
【Coze-AI智能体平台】Coze OpenAPI 开发手册:鉴权、接口调用与 SDK 实践
javascript·人工智能·python·深度学习·microsoft·文心一言·开源软件
lizhongxuan17 小时前
LLM Wiki:让大模型替你打理知识库的完整指南
前端·后端·面试
神の愛17 小时前
利用json-to-ts工具进行转换,放置在typeScript.ts文件中
javascript·typescript·json
宇擎智脑科技18 小时前
Claude Code 源码分析(七):终端 UI 工程 —— 用 React Ink 构建工业级命令行界面
前端·人工智能·react.js·ui·claude code
dragon72518 小时前
Flutter错误处理机制
前端·flutter
数据知道18 小时前
claw-code 源码详细分析:Bootstrap Graph——启动阶段图式化之后,排障与扩展为什么会变简单?
前端·算法·ai·bootstrap·claude code·claw code
悟空瞎说18 小时前
深度解析:Vue3 为何弃用 defineProperty,Proxy 到底强在哪里?
前端·javascript
leafyyuki18 小时前
告别 Vuex 的繁琐!Pinia 如何以更优雅的方式重塑 Vue 状态管理
前端·javascript·vue.js
Amos_Web18 小时前
Solana开发(1)- 核心概念扫盲篇&&扫雷篇
前端·rust·区块链
Hooray18 小时前
AI 时代的管理后台框架,应该是什么样子?
前端·vue.js·ai编程