vue elementUI -- table的任意列合计功能

发布网友发布时间：2022-04-21 13:57

共1个回答

热心网友时间：2023-11-11 14:06

需求：
任意列显示后台传过来的总计数。
最后结果：

这里需要补充的是：我这里的合计数是从后台计算好传过来的，而不是前端计算的，所以这里不涉及table合计的方法，如需要，elementUI 的 table 中就有，可以参考那里。
我这里实现的主要是如何进行任意列的显示。

element UI 的table 中有显示合计的方法：

所以，如果要最后一行显示合计，直接在table设置上show-summary即可。
但是这往往无法满足我们的需求，就比如我这里需要显示的是后台传过来的数值，而且是任意我想要显示的列。所以我就要去自定义它的合计方法。

使用column.property去匹配他的每一列的命名，然后赋值。
最后别忘了将该方法在 methods 中注册：

另外如何从后台取值也在这里记录一下：
后台传过来的值是一个数组形式：

而其实前台我就只需要数组的第一个object中的两个参数的值，所以需要在前台转化一下，将其转化为object形式。
那么首先就要在date中去注册一下：

然后在接收的时候去转化一下：

判断了一下是否为空，然后做转化。