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

}

}

相关推荐
xiaominlaopodaren3 分钟前
three.js地图数学基础(二):Web Mercator
javascript·gis·three.js
谷哥的小弟7 分钟前
TypeScript接口
javascript·typescript
RobinDevNotes8 分钟前
轻量级动画引擎Anime.js迎来V4大版本更新
开发语言·前端·javascript·ecmascript·动画·c4前端
渣波13 分钟前
React 性能优化实战:从 memo 到 Hooks 的底层原理与进阶封装
前端·javascript
触底反弹13 分钟前
别再 Prop Drilling 了!一文彻底搞懂 React 组件通信的 5 种方案
前端·javascript·react.js
玉宇夕落14 分钟前
受控与非受控组件以及一些表单的简单业务逻辑的理解
前端
两只羊ovo14 分钟前
listToTree 速通:一维数组怎么变出多级菜单?Map 和 reduce 两种全解
前端·javascript
何时梦醒16 分钟前
React 进阶必修:彻底搞懂受控组件与非受控组件
前端·javascript·react.js
无糖可可果19 分钟前
React 性能优化利器:深入理解 `useCallback`、`useMemo` 与 `React.memo`
前端
今日无bug22 分钟前
JS 同步与异步:从单线程到 Promise
javascript·promise