【vue+el-table】实现表尾合计行分两行显示，一行显示勾选项之和，一行显示合计，已实现，具体思路解析

效果图：

思路解析：
首先进行了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 } = param
      let 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 = row
  
      this.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) return
      this.$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 = 0
      if (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;
}