动态实现element ui的el-table某列数据不同样式(比如颜色动态展示)

问题描述

在饿了么ui的框架中,输入数据el-form,输出数据el-table。有时候产品想让枯燥的表格来点动态的样式,比如不同的内容展示不同的样式,对于这个需求,其实方式有很多种,本文列举两种,以供参考。

实现方式一

效果图如下

动态实现element ui的el-table某列数据不同样式(比如颜色动态展示)_第1张图片

代码如下



方式一总结

这个第一种方式,虽然能实现效果,但是代码都写在el-table里面了,看起来比较臃肿,如果只要求动态展示两三种样式的话,还可以写,但是如果有七八种甚至更多样式动态展示,这种写法就会十分臃肿,且后期不太好维护。我个人推荐第二种方式,就是使用vue自带的 :style 动态绑定样式来实现,不仅可以简洁代码,而且可以实现更加丰富的效果。如下:

实现方式二

效果图如下

动态实现element ui的el-table某列数据不同样式(比如颜色动态展示)_第2张图片

代码如下



 
打印传过去的scope

动态实现element ui的el-table某列数据不同样式(比如颜色动态展示)_第3张图片

方式二总结

这种通过vue绑定样式来控制,比第一种方式,灵活很多。毕竟第一种方式是写在el-table里面,第二种方式是写在methods方法里面。具体用那种,看场景需求。

随笔记录一下,哈哈

你可能感兴趣的:(动态实现element ui的el-table某列数据不同样式(比如颜色动态展示))