问题背景

一般我们将数据显示到element 表格是直接显示的,如下所示:
在这里插入图片描述
这里tableData是个数组,数组里面的元素是一个个的字典,长这样:
在这里插入图片描述
显示到表格里是这样:
在这里插入图片描述
可以看到这里面所有的数据都是从后端传过来直接显示的,但是如果我想进行一些例如四舍五入或者加单位之类的操作呢?这里就可以考虑使用过滤器。


解决方式

过滤器添加在这个位置:
在这里插入图片描述
和data数据,methods方法集处于平级位置,然后过滤器可以这么写:
在这里插入图片描述
这个过滤器函数叫做rounding,功能是将数值四舍五入到整数


然后页面上修改成这样:
在这里插入图片描述
scope.row.tub是每个列对应的数据,我这里乘以100,再使用rounding过滤器进行四舍五入的操作,最后加了一个百分号。

最终表格中的数据显示为结果显示为:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐