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

}

}

相关推荐
lsp程序员0101 天前
使用 Web Workers 提升前端性能:让 JavaScript 不再阻塞 UI
java·前端·javascript·ui
J***Q2921 天前
前端路由,React Router
前端·react.js·前端框架
1***81531 天前
前端路由参数传递,React与Vue实现
前端·vue.js·react.js
q***13611 天前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
xixixi777771 天前
了解一下Sentry(一个开源的实时错误监控平台)
前端·安全·开源·安全威胁分析·监控·sentry
Keely402851 天前
学习编写chrome插件:Hello World 扩展
前端·chrome
hhcccchh1 天前
学习vue第三天 Vue 前端项目结构的说明
前端·vue.js·学习
卷福同学1 天前
【AI编程】用Codebuddy+lighthouse开发AI年龄模拟网站
javascript·后端
源力祁老师1 天前
Odoo 19 制造与会计集成深度解析
前端·javascript·制造