vxe-table grid 分享实现单元格编辑表格表尾合计实时计算

在使用 vxe-grid 时，需要实现表尾合计功能，通过单元格编辑之后，实时自动计算表尾合计的值，自动更新表尾合计数据，实现方式通过监听change 事件，从而实现实时更新合计功能。

官网：https://vxetable.cn

可以使用插槽模板，也可以使用配置式，下面是配置式的用法：

<template><div><vxe-button status="primary" @click="insertEvent">新增</vxe-button><vxe-grid ref="gridRef" v-bind="gridOptions"><template #action="{ row }"><vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button></template></vxe-grid></div>
</template><script>
import { VxeUI } from 'vxe-pc-ui'const meanNum = (list, field) => {let count = 0list.forEach(item => {count += Number(item[field])})return (count / list.length).toFixed(2)
}const sumNum = (list, field) => {let count = 0list.forEach(item => {count += Number(item[field])})return count.toFixed(2)
}export default {data () {const gridOptions = {border: true,showOverflow: true,showFooter: true,height: 400,editConfig: {trigger: 'click',mode: 'row'},columns: [],data: [{ id: 10001, name: 'Test1', role: 'Develop', age: 10, num: 28, rate: 5, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', age: 34, num: 22, rate: 4, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', age: 56, num: 32, rate: 3, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', age: 45, num: 24, rate: 1, address: 'Shanghai' },{ id: 10005, name: 'Test5', role: 'PM', age: 56, num: 32, rate: 4, address: 'Shanghai' },{ id: 10006, name: 'Test6', role: 'Designer', age: 45, num: 24, rate: 1, address: 'Shanghai' }],footerData: []}const meanObj = {seq: '平均',name: '-',age: '',rate: '',num: ''}const sumNObj = {seq: '和值',name: '-',age: '',rate: '',num: ''}return {gridOptions,meanObj,sumNObj}},created () {const ageEditRender = {name: 'VxeNumberInput',props: {type: 'integer',min: 1,max: 120},events: {change: this.updateFootEvent}}const numEditRender = {name: 'VxeNumberInput',events: {change: this.updateFootEvent}}const rateEditRender = {name: 'VxeNumberInput',events: {change: this.updateFootEvent}}this.gridOptions.columns = [{ field: 'seq', type: 'seq', width: 60 },{title: '统计信息',children: [{ field: 'name', title: 'Name', editRender: { name: 'VxeInput' } },{ field: 'age', title: 'Age', editRender: ageEditRender },{ field: 'num', title: 'Num', editRender: numEditRender },{ field: 'rate', title: 'Rate', editRender: rateEditRender }]},{ title: '操作', width: 100, slots: { default: 'action' } }]this.gridOptions.footerData = [this.meanObj,this.sumNObj]this.updateFootCount(this.gridOptions.data)},methods: {async insertEvent () {const record = {name: 'New name'}const $grid = this.$refs.gridRefif ($grid) {const { row: newRow } = await $grid.insert(record)$grid.setEditCell(newRow, 'age')}},async removeRow (row) {const $grid = this.$refs.gridRefif ($grid) {const type = await VxeUI.modal.confirm('您确定要删除该数据?')if (type === 'confirm') {await $grid.remove(row)this.updateFootEvent()}}},updateFootCount (list = []) {this.meanObj.age = meanNum(list, 'age')this.meanObj.num = meanNum(list, 'num')this.meanObj.rate = meanNum(list, 'rate')this.sumNObj.age = sumNum(list, 'age')this.sumNObj.num = sumNum(list, 'num')this.sumNObj.rate = sumNum(list, 'rate')},// 在值发生改变时更新表尾合计updateFootEvent () {const $grid = this.$refs.gridRefif ($grid) {const { visibleData } = $grid.getTableData()this.updateFootCount(visibleData)}}}
}
</script>

https://gitee.com/xuliangzhan/vxe-table