vue el-table自定义合计

需求：表格显示合计

效果

1、在table里添加 ref=“table” show-summary summary-method

2、在方法里增加合计方法

   getSummaries(param) {

                const { columns, data } = param

                const sums = []

                columns.forEach((column, index) =>{

                    if (index === 0) {

                        sums[index] = '合计'

                        return

                    }

                    const values = data.map((item) =>Number(item[column.property]))

                    if (column.property === 'JQInsFee' || column.property === 'SYInsFee' || column.property === 'TaxFee') {

                        sums[index] = values.reduce((prev, curr) =>{

                            const value = Number(curr)

                            if (!isNaN(value)) {

                                return Number(Number(prev) + Number(curr)).toFixed(2)

                            } else {

                                return prev

                            }

                        }, 0)

                        sums[index]

                    }

                })

                return sums

            },

3、自定义合计没有效果时是因为table给了固定高度（ps也可以不给固定高度，使用max-height）

   updated() {

              this.$nextTick(() =>{

                this.$refs['table'].doLayout()

            })

antd UI框架中table表格本身没有合计行功能需要自己实现，

以下是实现的过程。

1.在设置column时添加序号列，序号为0时显示‘合计’

2.在传data时注意处理下后端返回的total数据

3.这个时候表格显示上会出新问题，因为合计占了一行，导致下面数据展示少了一行，所以需要让pagesize+1

4.因为pageSize在传值的时候多加了1，这样传给后台就又不对了，所以在发送请求之前再重新令pageSize - 1，这样问题就解决了。

需求：

任意列显示后台传过来的总计数。

最后结果：

这里需要补充的是：我这里的合计数是从后台计算好传过来的，而不是前端计算的，所以这里不涉及table合计的方法，如需要，elementUI 的 table 中就有，可以参考那里。

我这里实现的主要是如何进行任意列的显示。

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

所以，如果要最后一行显示合计，直接在table设置上show-summary即可。

但是这往往无法满足我们的需求，就比如我这里需要显示的是后台传过来的数值，而且是任意我想要显示的列。所以我就要去自定义它的合计方法。

使用column.property去匹配他的每一列的命名，然后赋值。

最后别忘了将该方法在 methods 中注册：

另外如何从后台取值也在这里记录一下：

后台传过来的值是一个数组形式：

而其实前台我就只需要数组的第一个object中的两个参数的值，所以需要在前台转化一下，将其转化为object形式。

那么首先就要在date中去注册一下：

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

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

---