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

}

}

相关推荐
蜡台3 分钟前
Vue 中多项目的组件共用方案
前端·javascript·vue.js·git
笨笨狗吞噬者9 分钟前
【uniapp】微信小程序实现自定义 tabBar
前端·微信小程序·uni-app
angerdream25 分钟前
最新版vue3+TypeScript开发入门到实战教程之路由详解二
javascript·vue.js
恋猫de小郭25 分钟前
React Native 鸿蒙 2026 路线发布,为什么它的适配成本那么高?
android·前端·react native
一颗烂土豆29 分钟前
拒绝 rem 计算!Vue3 大屏适配,我用 vfit 一行代码搞定
vue.js·响应式设计·数据可视化
徐小夕31 分钟前
一个普通Word文档,为什么99%的开源编辑器都"认怂"了?我们选择正面硬刚
vue.js·后端·github
呆头鸭L35 分钟前
Electron进程通信
前端·javascript·electron·前端框架·vue
splage1 小时前
spring-boot-starter和spring-boot-starter-web的关联
前端
张元清1 小时前
使用 Hooks 构建无障碍 React 组件
前端·javascript·面试
Mahut2 小时前
从零构建神经影像可视化库:neuroviz 的架构设计与实现
前端·javascript·github