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

}

}

相关推荐
kerli3 分钟前
基于 kmp/cmp 的跨平台图片加载方案 - 适配 Android View/Compose/ios
android·前端·ios
RONIN18 分钟前
vue组件、组件生命周期、组件分离模块化
前端·vue.js
小强198819 分钟前
HTML5语义化标签:从`div`到`article`与`section`的进化之路
前端
RONIN19 分钟前
vue开发环境与基础语法、计算属性、侦听属性
前端·vue.js
WayneYang26 分钟前
JavaScript ES6+ (ES2015~ES2024) 全特性整理
前端·javascript
逆光如雪27 分钟前
移动端border-left 和 width:1px,同样写1px为什么粗细不同?
前端·css
千寻girling28 分钟前
被内推的面试 , 第一次
java·前端·python·面试·职场和发展·typescript·node.js
JustNow_Man40 分钟前
Bun 常用命令速查清单(TypeScript 编译篇)
前端·javascript·typescript
anyup1 小时前
uni-app 全能日历组件,支持农历、酒店预订、打卡签到、价格日历多种场景
前端·前端框架·uni-app
|晴 天|1 小时前
从零打造现代化个人博客:Vue 3 + TypeScript + Element Plus 完整实战
javascript·css·chrome·typescript·html5·webstorm