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

业务需求:
el-table表格中单元格根据不同的数据显示不同的内容_第1张图片
进程状态有三种显示状态:运行中,停止,重启,根据后台返回的不同的状态值显示不同的内容
这个功能需求很常见,大家应该都没什么问题

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

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

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

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

你可能感兴趣的:(vue.js,html5)