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

}

}

相关推荐
wangruofeng13 小时前
写给开发者的〈重构 UI〉实战笔记:从改好一个设置页开始,告别“程序员审美”
前端·aigc
程序员鱼皮14 小时前
格局!刚刚 DeepSeek 正式开放全家桶 API,咱都能复刻 DeepSeek App 了?
前端·aigc·ai编程
ZhengEnCi14 小时前
登录页电脑端怎么设计才不空:5 种布局方案与可粘贴 AI 提示词
前端·css·设计
Penge66614 小时前
JavaScript:DOM 树
前端
用户00447295382514 小时前
练歌镜:让眼镜听懂“循环这一句”
javascript
Penge66614 小时前
CSS 核心布局指南:盒模型、Flex 布局与 Position 定位
前端
Penge66616 小时前
HTML基础:HTML 标签属性
前端
Penge66616 小时前
HTML 基础:块级元素、行内元素与行内块元素详解
前端
Penge66616 小时前
前端基础:html语义化
前端
用户308169987648516 小时前
同一个端口能被两个程序监听吗?TCP 11 组绑定实测
前端