在elementui的el-table的某一列动态实现不同样式的数据（比如颜色的动态显示）

时间：2023-03-31 15:12:47 vue.js

问题描述在饿了么ui的框架下，输入数据el-form，输出数据el-table。有时候产品想给枯燥的表格添加动态的样式，比如不同的内容展示不同的样式。其实有很多方法可以满足这个要求。本文列举两个供参考。实现方法1效果图如下，代码如下;

方法1总结第一种方法，虽然可以实现效果，但是代码写在el-table中，看起来比较臃肿，如果只需要两三个样式就可以动态显示，还是可以写的，但是如果动态展示的样式有七八种甚至更多，这种写法会很臃肿，后期也不好维护。我个人比较推荐第二种方式，就是使用vue自带的:style动态绑定样式来实现，这样不仅可以简化代码，还可以实现更丰富的效果。如下：实现方法2效果图如下代码如下

打印传递过来的scope方法二总结这个是通过vue绑定样式控制的，比第一种方法灵活多了。毕竟第一种方法写在el-table中，第二种方法是写在methods方法中。具体使用哪一种，要看场景的需要。记录一下，哈哈