SOURCE

var Main = {
    data() {
        return {
            tableData: [
                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: '0', sex2: ['0'], num1: 40, age: 28, rate: 22 },
                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Designer', sex: '1', sex2: ['0', '1'], num1: 23, age: 22, rate: 34 },
                { id: 10003, name: 'Test3', nickname: 'T3', role: 'Test', sex: '0', sex2: ['1'], num1: 200, age: 32, rate: 18 },
                { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: '1', sex2: ['1'], num1: 30, age: 23, rate: 13 },
                { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: '0', sex2: ['1', '0'], num1: 20, age: 30, rate: 6 },
                { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: '1', sex2: ['0'], num1: 10, age: 21, rate: 33 },
                { id: 10007, name: 'Test7', nickname: 'T7', role: 'Develop', sex: '0', sex2: ['0'], num1: 5, age: 29, rate: 4 },
                { id: 10008, name: 'Test8', nickname: 'T8', role: 'PM', sex: '1', sex2: ['0'], num1: 2, age: 35, rate: 55 }
            ]
        }
    },
    methods: {
        footerCellClassName({ $rowIndex, columnIndex }) {
            if (columnIndex === 1) {
                if ($rowIndex === 0) {
                    return 'col-blue'
                }
            }
            if (columnIndex === 2) {
                if ($rowIndex === 1) {
                    return 'col-red'
                }
            }
        },
        // 在值发生改变时更新表尾合计
        updateFooterEvent() {
            const $table = this.$refs.xTable
            $table.updateFooter()
        },
        meanNum(list, field) {
            let count = 0
            list.forEach(item => {
                count += Number(item[field])
            })
            return count / list.length
        },
        sumNum(list, field) {
            let count = 0
            list.forEach(item => {
                count += Number(item[field])
            })
            return count
        },
        footerMethod({ columns, data }) {
            return [
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                        return '平均'
                    }
                    if (['age'].includes(column.property)) {
                        return this.meanNum(data, column.property)
                    } else if (['rate', 'num1'].includes(column.property)) {
                        return this.meanNum(data, column.property)
                    }
                    return null
                }),
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                        return '和值'
                    }
                    if (['rate', 'num1'].includes(column.property)) {
                        return this.sumNum(data, column.property)
                    }
                    return null
                })
            ]
        },
        insertEvent() {
            const $table = this.$refs.xTable
            const record = {
                name: 'New name'
            }
            $table.insert(record).then(({ row }) => {
                $table.setActiveCell(row, 'age')
            })
        },
        removeEvent() {
            const $table = this.$refs.xTable
            $table.removeCheckboxRow()
        },
        saveEvent() {
            const $table = this.$refs.xTable
            const { insertRecords, removeRecords, updateRecords } = $table.getRecordset()
            VXETable.modal.alert(`insertRecords=${insertRecords.length} removeRecords=${removeRecords.length} updateRecords=${updateRecords.length}`)
        }
    }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@legacy/lib/style.css">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2">

</script>
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils">

</script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@legacy">

</script>
<div id="app">
	<template>
		<vxe-table border show-footer show-overflow ref="xTable" height="400" class="editable-footer" :row-config="{isHover: true}"
		 :export-config="{}" :footer-method="footerMethod" :footer-cell-class-name="footerCellClassName" :data="tableData" :edit-config="{trigger: 'click', mode: 'row'}">
			<vxe-column type="seq" width="60"></vxe-column>
			<vxe-colgroup title="统计信息">
				<vxe-column field="name" title="Name" :edit-render="{}">
					<template #edit="{ row }">
						<vxe-input v-model="row.name" type="text"></vxe-input>
					</template>
				</vxe-column>
				<vxe-column field="age" title="Age" :edit-render="{autofocus: '.vxe-input--inner'}">
					<template #edit="{ row }">
						<vxe-input v-model="row.age" type="text" :min="1" :max="120" @change="updateFooterEvent"></vxe-input>
					</template>
				</vxe-column>
				<vxe-column field="num1" title="Num" :edit-render="{autofocus: '.vxe-input--inner'}">
					<template #edit="{ row }">
						<vxe-input v-model="row.num1" type="text" @input="updateFooterEvent"></vxe-input>
					</template>
				</vxe-column>
				<vxe-column field="rate" title="Rate" :edit-render="{}">
					<template #edit="{ row }">
						<vxe-input v-model="row.rate" type="text" @input="updateFooterEvent"></vxe-input>
					</template>
				</vxe-column>
			</vxe-colgroup>
		</vxe-table>
	</template>
</div>

.orange-row {
  background-color: orange;
}
.row-highlight {
  background-color: red;
}