el-table表格中单元格根据不同的数据显示不同的内容

业务需求:
在这里插入图片描述
进程状态有三种显示状态:运行中,停止,重启,根据后台返回的不同的状态值显示不同的内容
这个功能需求很常见,大家应该都没什么问题

后来由于执行右边的启动,停止,重启按钮时,需要将进程状态展示位加载的状态,虽然只是加了一个小小的需求,但是实现起来困难很多,因为后台返回的状态码只有三个数据,0, 1,2,分别代表三种状态,刚开始我是用了三个v-if,然后最后一个加载的状态用v-else,只要状态码不是0,1,2,就显示加载状态,但是这个思路并不能实现,因为后台返回的状态码是固定的,我和后台沟通了下,在发起请求和请求成功的这段时间内,返回一个新的状态码,比如1-1,但是后来发现这个想法很傻,因为发起请求到请求成功的时间内,后台根本不能返回数据,所以这个想法只能pass。

后来开始在网上查资料,发现可以在发起请求到请求成功的这段时间内修改状态码数据的,代码如下
在这里插入图片描述
然后就相当于给状态码加了第四个值,这样v-else就可以生效了,以前从来没有想过竟然可以改后台返回的数据,我一直因为后台返回什么数据,前端就只能展示什么数据,今天这个方法简直打开了新大陆,眼前一亮的感觉,特地记录下来,方便大家参考
在这里插入图片描述
状态展示代码
在这里插入图片描述
最终实现这种效果

这个思路真的很神奇,在发起请求但是请求未成功时,修改状态数据,拓展一下,以后需要的场合都可以在这个过程中对数据处理了,思路真的很巧妙

参考文章:https://blog.csdn.net/weixin_44171757/article/details/103122150?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-2

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值