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()

            })

你可能感兴趣的:(vue el-table自定义合计)