效果图：

思路解析：
首先进行了el-table列表的组件封装，很多参数是传进来的。如果是普通的列表，相关参数直接定义就行
1、使用el-table的summary-method处理表尾行
（1）定义summaryIndex用于指定合计在哪一列显示
（2）定义el，将表尾合计行分成两个上下显示的div，便于添加类名和修改样式
（3）定义summaryList数组，需要处理哪些列，就传这样的格式,包含要处理列的字段名，如：[‘payAmt’,‘receiveAmt’]

2、复选框勾选的时候和表尾合计行联动
（1）在单选和全选事件中，调用表尾合计行方法
（2）定义ckeckedResult对象，用于和包含处理列的字段名的数组，即summaryList数组进行对比，拿到需要处理列的选中项之和
（3）在表尾合计行方法中，将勾选项之和回显

完整代码：
表尾合计行方法

 getSummaries(param) {const { columns, data } = paramlet sums = []if (!data.length) return []columns.forEach((column, index) => {if (this.summaryIndex > 0) {sums[this.summaryIndex] = (() => {let el = (<div class="count-row-total"><div class="count-box"> 选中合计:</div><div>合计:</div></div>)return el})()} else {if (index === 0) {sums[index] = '合计:'return}}// 非税收入详情，集中支付列表if (this.summaryList.length > 0 && this.summaryList.includes(column.property)) {const column = columns[index]const values = data.map(item => Number(item[column.property]))const total = values.reduce((acc, curr) => {return isNaN(curr) ? acc : acc + curr}, 0)let sumtotal = total.toFixed(2)let checktotal = Object.keys(this.ckeckedResult).length == 0 ? 0 : this.ckeckedResult[column.property].toFixed(2)sums[index] = (() => {let el = (<div class="count-row-total">{' '}<div class="count-box txpr"> {checktotal}</div><div class="count-row txpr">{sumtotal}</div></div>)return el})()return} else {sums[index] = (() => {let otherel = (<div class="count-row-total">{' '}<div class="count-box txpr"> </div><div class="count-row txpr"> </div></div>)return otherel})()}})return sums},

复选框单选

    selectCheck(sele, row) {this.currentRow = rowthis.summaryParams(sele)// multiple为true不禁用多选if ((this.selectable && !this.selectable(row)) || this.multiple === true) {// this.$refs.standTables.doLayout()const obj = {columns: this.$refs.standTables.columns,data: this.form.source,}this.getSummaries(obj)return}// 清除 所有勾选项this.$refs.standTables.clearSelection()// 当表格数据都没有被勾选的时候 就返回// 主要用于将当前勾选的表格状态清除if (sele.length == 0) returnthis.$refs.standTables.toggleRowSelection(row, true)},

复选框全选

selectAll(selection) {// console.log(selection,'全选');// multiple为true不禁用多选if (this.multiple === true) {this.summaryParams(selection)return}this.$refs.standTables.clearSelection()},

     summaryParams(data) {let sum = 0if (this.summaryList.length > 0) {this.ckeckedResult = this.summaryList.reduce((acc, key) => {if (!acc[key]) {acc[key] = 0}data.forEach(item => {acc[key] += item[key] || 0})return acc}, {})}},

css

.count-row-total {.count-box {padding: 2px;border-bottom: 1px solid #dcdfe6;}.count-row {padding-right: 2px;text-align: right;}.txpr {text-align: right;padding-right: 20px;}
}/deep/ .el-table .cell {padding: 0 !important;
}