您的当前位置:首页动态实现elementui的el-table某列数据不同样式的示例

动态实现elementui的el-table某列数据不同样式的示例

来源:小侦探旅游网
动态实现elementui的el-table某列数据不同样式的⽰例

问题描述

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

实现⽅式⼀

效果图如下

代码如下

⽅式⼀总结

这个第⼀种⽅式,虽然能实现效果,但是代码都写在el-table⾥⾯了,看起来⽐较臃肿,如果只要求动态展⽰两三种样式的话,还可以写,但是如果有七⼋种甚⾄更多样式动态展⽰,这种写法就会⼗分臃肿,且后期不太好维护。我个⼈推荐第⼆种⽅式,就是使⽤vue⾃带的 :style 动态绑定样式来实现,不仅可以简洁代码,⽽且可以实现更加丰富的效果。如下:

实现⽅式⼆

效果图如下

代码如下

打印传过去的scope

⽅式⼆总结

这种通过vue绑定样式来控制,⽐第⼀种⽅式,灵活很多。毕竟第⼀种⽅式是写在el-table⾥⾯,第⼆种⽅式是写在methods⽅法⾥⾯。具体⽤那种,看场景需求。

到此这篇关于动态实现element ui的el-table某列数据不同样式的⽰例的⽂章就介绍到这了,更多相关动态实现element ui的el-table某列数据不同样式的⽰例内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!

因篇幅问题不能全部显示,请点此查看更多更全内容